编辑 jQuery 数据表字段

问题描述

我想为 JQuery 数据表中的一个字段值输出一个引导标签.该字段的可能值可以是0"或1"，并且根据结果我想决定要在数据表中输出哪个引导标签.不幸的是，我不知道如何在这种情况下进行 if 语句.

我的 JQuery:

$(document).ready(function() {$('#accountOverview').dataTable( {阿贾克斯":{"url": "/database/accounts.php","data": {"action": "selectAccounts"},数据源":"},列": [{数据":电子邮件"}，{数据":平台"}，{数据":硬币"}，{数据":利润日"}，{数据":玩家姓名"}，{ "data": "tradepileCards" },{ "data": "tradepileValue" },{数据":启用"}],自动宽度":假});});

我需要对启用"字段的结果使用类似的东西:

if(enabled==1) 在线else <label class="label label-error">离线</label>

HTML 表格:

<头><tr><th>电子邮件</th><th>平台</th><th>硬币</th><th>过去 24 小时的利润</th><th>玩家名</th><th>Tradepile Cards</th><th>Tradepile Value</th><th>状态</th></tr></thead><tbody id="accountList"><!-- 列出所有帐户--></tbody>

标签需要在字段状态"=每行的最后一个.

解决方案

按照 dataTable 的绘制"(发生在 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>');}别的 {$(this).wrapInner('<span class="label label-danger"></span>');}});};$('#accountOverview').dataTable( {阿贾克斯":{"url": "/database/accounts.php","data": {"action": "selectAccounts"},数据源":"},列": [{数据":电子邮件"}，{数据":平台"}，{数据":硬币"}，{数据":利润日"}，{数据":玩家姓名"}，{ "data": "tradepileCards" },{ "data": "tradepileValue" },{数据":启用"}],自动宽度":假，drawCallback":函数(设置){应用标签()；}});

注意事项:

1. 我想你想要span(不是label).
2. 我想你想要.label-danger(不是.label-error).

在 http://jsfiddle.net/jhfrench/wrkkbcf1/查看.>

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.

My 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:

<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>

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

解决方案

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

Notes:

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

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

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