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

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，但是我想应用一个包含source.ip 数据的data-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 在创建表后选择此信息并将其作为 data-ip 提供给 td。

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