我知道这里有一个类似的问题JQuery DataTables: How to show/hide row details with multiple tables?但这并不完全适用于我当前的问题。
我有代码:
var oTable = $('.dataTable').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,3,4 ] },
{ "bVisible": false, "aTargets": [ 4 ] }
],
"aoColumns": [
null,
null,
null,
null,
{ "sType": "html" }
],
"aaSorting": [[1, 'asc']],
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('.dataTable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (oTable.fnIsOpen(nTr)) {
// This row is already open - close it
this.src = "css/images/details_open.png";
oTable.fnClose(nTr);
} else {
// Open this row
this.src = "css/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
} );
}
});
如果只有一个,如果我将 dataTable 类添加到第二个表,那么它们将作为数据表工作,但两个表中的显示/隐藏按钮都会失败。两个表都有相同的字段数和内容,只是为了使其工作,但仍然没有成功。
在类似的帖子中,该人建议添加:
tbl = $(this).parent().parent().dataTable();
点击功能,但我已经尝试过了,但没有成功。
我错过了什么?
最佳答案
简而言之:摆脱 fnInitComplete,并将“live”调用移至 dataTable 调用下方。
举个例子,如果你有三个表,每个表完成后,你当前的代码将执行 fnInitComplete 方法 - 因此 fnInitComplete 被调用 3 次。您的 fnInitComplete 使用选择器将点击事件“实时”到 img,并且选择器将“实时”到所有表。这会导致多重绑定(bind)。看看这个jsfiddle,http://jsfiddle.net/KeVwJ/ ,这会重复您的方法。 (请注意,我没有使用图像,因此仅捕获 td 单元格上的点击,而不是图像)。
var oTable = $('.dataTable').dataTable( {
"bFilter": false,
"bPaginate": false,
"fnInitComplete": function(oSettings) {
$('.dataTable tbody td').live('click', function () {
var nTr = this.parentNode;
alert(nTr);
} );
}
});
如果单击表中的任何行,您将收到 3 个警报框,因为创建了 3 个表,并且它们在 fnInitComplete 时“实时”单击所有表。
要修复此问题,请删除 fnInitComplete,并将“live”代码放在对 dataTable 的调用之后。那应该可以解决它。看看这个jsfiddle:http://jsfiddle.net/rgMNu/单击表中的任何行,它将识别正确的表类。由于我要捕获 td 上的点击,因此我只需执行 this.parentNode.parentNode.parentNode 即可。我认为你必须达到另一个级别。
$('.dataTable tbody td').live('click', function ()
{
var t = this.parentNode.parentNode.parentNode;
alert(jQuery(t).attr('class'));
} );
关于javascript - JQuery 数据表 : Show/hide row details with multiple tables,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16486405/