Question

我想为JQuery dataTable中的一个字段值输出一个引导标签。该字段可能的值可以是＆＃39; 0＆＃39; 0或者＆＃39; 1＆＃39;并根据结果我想决定我想在dataTable中输出哪个引导程序标签。不幸的是，如果对这种情况发表声明，我不知道如何做到这一点。

我的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
    });
});

我需要使用这样的东西来获得＆＃34;启用＆＃34;的结果。字段：

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>

标签需要在现场＆＃34;状态＆＃34; =最后一行。

Answer 1

关注dataTable＆＃34; draw＆＃34; （在AJAX加载数据后发生），您可以查找每行的最后td并使用wrapInner()注入所需的HTML。因此，在您的情况下，请尝试：

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();
    }
});

注意：

我想你想要span（不是label）。
我想你想要.label-danger（不是.label-error）。

Check it out at http://jsfiddle.net/jhfrench/wrkkbcf1/.

编辑jQuery Datatable字段

1 个答案: