在数据表上过滤/搜索后单击返回无数据

Question

我将 jQuery DataTables 用于正确显示多行（分页）数据的表。

1. 如果我点击一行，我会根据需要弹出一个显示数据的窗口。

2. 如果我翻阅我的结果并单击一行，我会看到一个显示所需数据的弹出窗口。

3. 我可以根据需要通过键入名称来过滤我的结果。

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

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

      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

原因

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

解决方案

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

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

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

演示

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