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

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

更多信息请点击此处。

Update:在你提供了更多关于你的代码的细节之后，我做了很多关于DataTables插件的阅读，它似乎确实是一个斗争，通过API直接做这种操作。我建议您按照自己的想法添加一个隐藏的额外列，或者按以下方式执行:

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

span当然会被隐藏，然后你的页面会有一些jQuery来选择表创建后的信息，并把它作为data-ip给td。

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