编辑jQuery Datatable字段 [英] Edit jQuery Datatable fields

问题描述

我想在JQuery dataTable中输出字段的一个值的引导标签。该字段可能的值可以是0或1，并且根据结果，我想决定要在dataTable中输出哪个引导标签。不幸的是，我不知道如何处理这个案例。

I would like to output a bootstrap label for one value of a field in a JQuery dataTable. This fields possible values can be '0' or '1' and depending on the result I want to decide which bootstrap label I want to output in the dataTable. Unfortunately I don't know how I can do this if statement for this case.

我的JQuery：

$(document).ready(function() {  
    $('#accountOverview').dataTable( {
        "ajax": {
            "url": "/database/accounts.php",
            "data": {"action": "selectAccounts"},
            "dataSrc": ""
        },
        "columns": [
            { "data": "email" },
            { "data": "platform" },
            { "data": "coins" },
            { "data": "profitDay" },
            { "data": "playerName" },
            { "data": "tradepileCards" },
            { "data": "tradepileValue" },
            { "data": "enabled" }
        ],
        "autoWidth": false
    });
});

我需要使用这样的启用字段的结果：

I need to use something like this for the result of the "enabled" field:

if(enabled==1) <label class="label label-success">Online</label>
else <label class="label label-error">Offline</label>

HTML表：

<table id="accountOverview" class="table datatable">
    <thead>
        <tr>
            <th>E-Mail</th>
            <th>Platform</th>
            <th>Coins</th>
            <th>Profit last 24h</th>
            <th>Playername</th>
            <th>Tradepile Cards</th>
            <th>Tradepile Value</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="accountList">
        <!-- List all accounts -->
    </tbody>
</table>

标签需要在status=最后一行的字段中。

The label needs to be in the field "status" = the last each row.

推荐答案

以下dataTable的draw（在AJAX加载数据后发生），您可以查找最后一个 td ，并使用 wrapInner（） 注入你想要的HTML。所以，在你的情况下，尝试：

Following dataTable's "draw" (which happens after AJAX loads your data), you can look up the last td of each row and use wrapInner() to inject the HTML you want. So, in your case, try:

var apply_label=function(){
    $('#accountOverview').find('td:last-child').not(':has(.label)').each(function(){
        if( this.innerHTML==="1"){
            $(this).wrapInner('<span class="label label-success"></span>');
        }
        else {
            $(this).wrapInner('<span class="label label-danger"></span>');
        }
    });
};
$('#accountOverview').dataTable( {
    "ajax": {
        "url": "/database/accounts.php",
        "data": {"action": "selectAccounts"},
        "dataSrc": ""
    },
    "columns": [
        { "data": "email" },
        { "data": "platform" },
        { "data": "coins" },
        { "data": "profitDay" },
        { "data": "playerName" },
        { "data": "tradepileCards" },
        { "data": "tradepileValue" },
        { "data": "enabled" }
    ],
    "autoWidth": false,
    "drawCallback": function( settings ) {
        apply_label();
    }
});

注意：

1. 我想你想要 span （不是标签）。


2. 我想你希望 .label-danger （不是 .label-error ）。

1. I think you want span (not label).
2. I think you want .label-danger (not .label-error).

查看http://jsfiddle.net/jhfrench/wrkkbcf1/。

这篇关于编辑jQuery Datatable字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！