将数据元素应用于 Datatables 单元格

Question

我正在尝试使特定列的单元格都具有与之关联的 data-ip 属性，以便稍后在需要数据时可以使用 jQuery 读取它。我可以创建一个单独的隐藏列，其中包含 ip 但是我想先尝试这种方法。

我正在尝试将更具可读性的 hostname 列与 ip 相关联。这是来自 aoColumns 的专栏：

{"sTitle": "Hostname", sName: "host", sWidth: "30%", sClass: 'host', mData:
    function (source) {
        return source.hostname
    }
}

正如您在代码中看到的那样，我有 source.hostname 用 JSON hostname 填充 td 但是我想应用 data-ip 属性包含 source.ip 数据。这可能吗？

编辑 - 整个 jQuery 元素：

$('#servicesTable').dataTable({
    'aaData': servicesJson['registered_services'],
    'aoColumns': [
        {"sTitle": "Hostname", sName: "host", sWidth: "30%", sClass: 'host', mData:
            function (source) {
                return source.hostname
            }
        },
        {"sTitle": "Service", sName: "service", sWidth: "30%", sClass: 'service', mData: "serviceName"},
        {"sTitle": "Monitored?", sName: "monitored", sWidth: "10%", sClass: 'monitored', mData:
            function (source) {
                if (typeof source.active === 'undefined')
                    return '';
                var monitor = source.active;
                if (monitor == 1)
                    return "<input type='checkbox' class='monitor' name='monitored' checked />";
                else
                    return "<input type='checkbox' class='monitor' name='monitored'/>";
            }
        },
        {"sTitle": "Status", sName: "status", sWidth: "15%", sClass: 'status', mData: "status"},
        {"sTitle": "URL", sName: "url", sWidth: "5%", sClass: 'url right', mData:
            function (source) {
                if (typeof source.url === 'undefined' || source.url == '')
                    return '';
                return "<a class='ui-icon ui-icon-link' href='" + source.url + "'>NAGIOS</a>";
            }
        },
        {"sTitle": "Add/Remove", sName: "add-remove-new", sWidth: "15%", sClass: 'add-remove-new', mData:
            function (source, type, val) {
                if (typeof source.addRemove === 'undefined')
                    return "<button class='add-remove-new' type='button'>Remove</button>";
                else
                    return "<button class='add-remove-new' type='button'>Add</button>";
            }
        },
    ],
    'bJQueryUI': true,
    'bInfo': false,
    'bPaginate': false,
    'bSort': false,
    'bFilter': true,
    'iDisplayLength': 25,
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        //function that is called everytime an element is added or a redraw is called
        //aData[] is an arraw of the values stored in datatables for the row
        //to change a row's html use $('td:eq('+index+')', nRow).html( html here ); where index is the index of the td element in the row
    }
});

Answer 1

当然是。使用jQuery的.data()设置td的data-ip，如下：

$('#my-td').data('ip', source.ip);

更多信息here。

更新： 在你提供了更多关于你的代码的细节之后，我做了很多关于 DataTables 插件的阅读，做这种事情似乎真的很困难直接通过 API 进行操作。我建议您按照自己的想法隐藏额外的列，或者按照以下步骤操作：

return source.hostname+'<span class="id-info">'+source.ip+'</span>';

当然 span 会被隐藏，然后您的页面会有一些 jQuery 在创建 table 之后选择此信息并将其提供给 td 作为其 data-ip.

在代码丑陋方面没有太大区别，但至少它不会在页面上留下隐藏列，因为您的 jQuery 可以在添加 IP 后删除 span data-ip 属性。

将数据元素应用于 Datatables 单元格

Apply data- element to Datatables cell

javascript

jquery

datatables

jquery-data