javascript - 过滤后 rowData 保留在第一条记录上

Question

当使用数据表的过滤框时，rowId保留在第一条记录上，我不明白为什么。

这是数据表(尽可能简化):

$.ajax({
  url: 'process/getData.php',
    type: 'POST',
    data: data,
    dataType: 'html',
    success: function(data, textStatus, jqXHR){
      var jsonObject = JSON.parse(data); 
      var table = $('#example1').DataTable({
        "data": jsonObject,
        "columns": [  
          {
            "data": "MONDAY",
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol)
            {
              $(nTd).html("<span class='checkMon'>+oData.MONDAY+</span>");
            },
            // columns for each work day
          }
        ],
        "paging": false,
        "scrollY": 730,
        "scrollX": true,
        "bDestroy": true,
        "stateSave": true,
        "autoWidth": true
      });
    },
    error: function(jqHHR, textStatus, errorThrown) {
      console.log('fail: '+ errorThrown);
      return false;
    }
});

在数据表之外，我有 onclick 事件处理程序:

$('#example1').on('click', 'tr > td > .checkMon', function(e)
{
  e.preventDefault();
  var $dataTable = $('#example1').DataTable();
  var tr = $(this).closest('tr');
  var data = $dataTable.rows().data();
  var rowData = data[tr.index()];

  console.log(rowData.UID);
});

在过滤之前，当我单击任何单元格时，控制台会读取正确的 rowData.UID。

问题是，当我再次过滤并单击单元格时，控制台会读取第一行的 rowData.UID。

有人知道为什么会发生这种情况以及如何解决它吗？

Answer 1

如果你想要实现的只是登录控制台UID源自包含 <span> 的行的对象的属性您已点击，以下方法应该有效:

$('#example1').on('click', '.checkMon', function(e)
{
  e.preventDefault();
  const dataTable = $('#example1').DataTable();
  const rowData = dataTable.row($(this).closest('tr')).data();
  console.log(rowData.UID);
});

此外，请考虑使用 ajax 选项。这样，您就不需要浪费性能来销毁/重新创建表，这将使您的代码更干净、更安全。