Question

我正在使用jQuery DataTables来正确显示多个（分页）数据行的表。

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

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

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

      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以获取代码和演示。

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

1 个答案: