JQuery DataTables:显示/隐藏多个表的行详细信息
Posted
技术标签:
【中文标题】JQuery DataTables:显示/隐藏多个表的行详细信息【英文标题】:JQuery DataTables: Show/hide row details with multiple tables 【发布时间】:2013-05-05 09:11:13 【问题描述】:我知道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();
到点击功能,但我已经尝试过,它没有工作。
我错过了什么?
【问题讨论】:
您的表的 ID 是什么?确保 ID 是唯一的。看起来您正在使用类选择器制作表格 dataTables。如果 ID 不是唯一的,则会导致问题。 dataTables 不需要 ID 作为选择器 我没有说它需要一个 ID 作为选择器。但是如果 ID 不是唯一的,就会遇到问题。在这里查看我的答案:***.com/questions/16463646 我正在调用所有具有 dataTable 类的表,因此这些表没有 ID。我的问题是 oTables var 带有 2 个表,我需要找到一种方法来选择当前表。 【参考方案1】:简而言之:摆脱 fnInitComplete,将“实时”调用移至 dataTable 调用下方。
例如,如果您有三个表,则在每个表完成后,您当前的代码将执行 fnInitComplete 方法 - 因此 fnInitComplete 被调用 3 次。您的 fnInitComplete 使用选择器将点击事件“活”到 img,并且选择器将“活”到所有表。这会导致多个绑定。请参阅此 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'));
);
【讨论】:
谢谢,我已经解决了一些问题,但它看起来很丑……将它移出 Init 函数很有意义:)以上是关于JQuery DataTables:显示/隐藏多个表的行详细信息的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Jquery Datatables 中根据条件隐藏列?
jquery datatables如何去掉搜索框和每页显示多少条数据