javascript - 将数据元素应用到数据表单元格

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 在创建表后选择此信息并将其提供给 td作为其 data-ip .

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