1

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

这是我到目前为止所拥有的：

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

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

4

3 回答 3

2

查看此页面上的 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文档，一切都在那里..真的

于 2013-02-27T16:55:58.923 回答
1

使用委托事件：

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

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

于 2013-11-27T10:40:38.803 回答
0

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

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
    }
  });
于 2013-11-26T21:25:19.040 回答