在 Jquery DataTables 的所有页面上使表格行可点击答案

【问题标题】：Making table rows clickable on all pages of Jquery DataTables在 Jquery DataTables 的所有页面上使表格行可点击
【发布时间】：2013-02-27 16:51:05
【问题描述】：

所以我已经实现了带有分页的 dataTables 插件。当我单击表中的任何行时，我希望出现一个引导模式。到目前为止，当我单击第一页上的行时，我可以使模式正常工作。但是一旦我转到下一页，所有行都不可点击。

这是我目前所拥有的：

    $(document).ready(function() {
        $("tr").click(function(){
            $('#myModal').modal('show');
        });
    });

我觉得这可以使用 DataTables API 函数来完成，但我缺乏经验让我望而却步。最简单的方法是什么？

【问题讨论】：

嘿伙计欢迎来到社区。也发布您的 html

标签： javascript jquery-plugins twitter-bootstrap datatables

【解决方案1】：

查看此页面上的 fnGetData 示例

http://www.datatables.net/api

  // Row data
$(document).ready(function() {
  oTable = $('#example').dataTable();

  oTable.$('tr').click( function () {
    var data = oTable.fnGetData( this );
    // populate your modal with the data from data variable which is the data that the row contains
    //show your modal
  } );
} );

当您将数据保存在模态中并关闭它时，只需重新加载数据表 ...

你真的需要看一下api文档，一切都在那里..真的

【讨论】：

@theBookeyMan 页面加载时，分页表在 DOM 中没有所有行；此时只有表格行的第一页在 DOM 中，当您翻阅表格时，DataTables 会动态地从 DOM 中添加/删除行。您的点击事件不会绑定到这些动态创建的行，因为它们还不存在于 DOM 中。相反，您必须告诉 jQuery 监听一个 确实存在 并且在分页期间没有被删除/替换的元素，即表体。
好吧，这是有道理的。如果 jQuery 正在监听整个 tbody 元素，它可以区分表格行吗？我想要每一行都有一个单独的模式。
好吧......您将特定模式分配给特定行的逻辑是什么？表格行和模态是什么关系？

【解决方案2】：

使用委托事件：

$('#myTable tbody').on( 'click', 'tr', function () { ... } );

更多信息请参见http://datatables.net/faqs#events。

【讨论】：

【解决方案3】：

由于没有人真正发布最终答案，我正在跟进这个问题，因为我遇到了同样的问题。

COS.coupon.table_columns_titles = new Array();
COS.coupon.table_columns_titles.push({"sTitle": "Code"});
COS.coupon.table_columns_titles.push({"sTitle": "Status"});
COS.coupon.table_columns_titles.push({"sTitle": "Date"});
COS.coupon.table_columns_titles.push({"sTitle": "","sClass": "hide"});

$j('#listcoupons').dataTable({
  "bProcessing":true,
  'bJQueryUI': true,
  'sPaginationType': 'full_numbers',
  'oLanguage': {'sSearch': 'Filter:', 'sEmptyTable': 'Processing...'},
  'aoColumns': COS.coupon.table_columns_titles,
  "sScrollX": "100%",
  "iDisplayLength": 10,
  "bAutoWidth": false
});

...

// So this is the on click. I'm referencing the tbody because it's there
// throughout all the pagination.
$j("table#listcoupons tbody").on("click", function(event) {

...

// This is how I'm refering the specific item I wanted.
// Then I do get the id from the hidden column.
  $j(event.target).closest('tr').children('td').eq(1).text()

整个点击事件看起来像这样。

$j("table#listcoupons tbody").on("click", function(event) {
    if ($j(event.target).closest('tr').children('td').eq(1).text() == 'Used') {
      // do some stuff/show a dialog
    } else {
      // do some other stuff/show a different dialog
    }
  });

【讨论】：