Question

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

这是我到目前为止所做的：

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

我有一种感觉，这可以使用DataTables API函数完成，但我缺乏经验让我退缩。这样做最简单的方法是什么？

Answer 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文档，一切都在那里..真的

Answer 2

使用委托活动：

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

有关详细信息，请参阅http://datatables.net/faqs#events。

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

使表行可以在Jquery DataTables的所有页面上单击

3 个答案: