在数据表 returns 上点击 filter/search 后没有数据

Question

我正在使用 jQuery DataTables 作为 table 正确显示多行（分页）数据。

如果我点击一行，我会看到一个弹出窗口，显示所需的数据。
如果我翻阅我的结果，然后单击一行，我会看到一个显示所需数据的弹出窗口。
我可以根据需要通过键入名称来过滤我的结果。

但是如果我过滤我的结果，然后点击一行，弹出窗口中没有数据。

为什么？甚至不确定如何调试它。

      ShowNewContactDialog: function () {
          egn.bwm("Loading...");
          egAjax.json('Services/foo.asmx/GetContacts',
          { 'state': objCustomer.State, 'membership': objCustomer.Member },
          function (result) {
              egn.Unblock();
              $('#ContactTable').dataTable({
                  'bJQueryUI': true,
                  'bAutoWidth': false,
                  'bDestroy': true,
                  'bServerSide': false,
                  'bProcessing': true,
                  'sPaginationType': 'full_numbers',
                  'aaData': result.aaData,
                  'oLanguage': {
                      'sZeroRecords': 'No records to display',
                      'sInfo': 'Showing _START_ to _END_ of _TOTAL_ entries'
                  },
                  'fnRowCallback': function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                      $(nRow).click(function () {
                          objCustomer.SelectContact(aData);
                      });
                      return nRow;
                  },
                  "aoColumns": [
                          {
                              "sTitle": "First Name",
                              "sName": "FirstName",
                              "mDataProp": "FirstName"
                          },
                          {
                              "sTitle": "Last Name",
                              "sName": "LastName",
                              "mDataProp": "LastName"
                          },
                          {
                              "sTitle": "Email Address",
                              "sName": "EmailAddress",
                              "mDataProp": "EmailAddress"
                          },
                          {
                              "sTitle": "Phone Number",
                              "sName": "BusPhone",
                              "mDataProp": "BusPhone"
                          },

                  ]
              });
              $('#btnSelectCust').hide();

              $('#ContactDialog').dialog('open');

          });
      }

Answer 1

CAUSE

指定回调函数的选项 fnRowCallback 不适合附加单击事件处理程序，因为每次绘制行时都会调用它。

SOLUTION

删除 fnRowCallback 选项并使用下面的代码，它应该适用于 DataTables 1.9 和 1.10。

$('#ContactTable').dataTable({
   // ... skipped ...
});

$('#ContactTable tbody').on('click', 'tr', function(){
   var data = $('#ContactTable').dataTable().fnGetData(this);
   objCustomer.SelectContact(data);
});

DEMO

有关代码和演示，请参阅 this jsFiddle。

在数据表 returns 上点击 filter/search 后没有数据

Click after filter/search on datatable returns no data

jquery

filtering

datatables