jquery - 数据表在最后一个 "Next"或任何 "Previous"分页按钮处中断

Question

我有以下 DataTable，它调用 status_icons() 函数，用图标替换 0 和 1 值。

在第一个结果页面(在 initComplete 上)，我调用 status_icons() 进行替换，然后在 DataTables 范围之外创建一个触发器，以便为下一个分页结果重新执行我的函数每个分页的 DataTable DOM 重建行为。

我收到的错误是，当您单击任何分页或编号分页上的“上一页”按钮时，会在当前图标上重新添加状态图标盒子。

我的用图标替换值的函数

function status_icons() {

    $('table tr').each(function() {
        if ($(this).find('td').eq(0).text() == '1') {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>');
        } else {
            $(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>');
        }
    });
}

数据表构建 - 在 initComplete 上调用第一页和第二页结果的函数

setTimeout(function() {
  $('#invoices-table').DataTable({
    responsive: true,
    columnDefs: [{ orderable: false, targets: [-1, -2, -3] }],
    dom: 'Bfrtip',  
    initComplete: function() {
      status_icons() // it executes my function for the first page of results
      var api = this.api();
      // some irrelevant code that uses api and does not cause my issue
      // ...

    }
  });
}, 1000);

jQuery 事件，用于在每次由于 DataTable 重建而单击 .paginate_button 时执行我的函数

$(document).on('click','.paginate_button', function() {
  if( !$(this).hasClass("disabled") ){
    status_icons(); // it executes for the rest paginations
  }
});

https://codepen.io/anon/pen/Wjqbbd

Answer 1

一般来说是really bad thing将事件委托(delegate)给document目的。此外，dataTables 完全窃取了点击事件，阻止您向 .paginate_buttons 添加额外的点击事件处理程序。 。 .paginate_button 上的工作事件处理程序将会是

$('body').on('mousedown','.paginate_button', function() {
  ...
})

但是，就您想要实现的目标而言，您的方法在某种程度上有些夸大或“错误”。数据表有 columns.render 回调来处理确切的这些问题。只需将其添加到您的 columDefs部分:

columnDefs: [
  { orderable: false, targets: [-1, -2, -3] },
  { targets : 0, 
    render: function(data, type) {
      if (type == 'display') {
        return data == '1' 
          ? '<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>'
          : '<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>'
      } else {
        return data
      }
    }
  }
],

你很好。它解决了这两个问题:一个问题是点击时缺乏操作，您根本不必担心页面更改，另一个问题是一遍又一遍地插入复制的 Font Awesome 图标。

它只是通过返回正确的 <i> 来工作。当数据表想要显示列的内容时，使用很棒的字体标记。

已将您的代码移植到 jsfiddle -> http://jsfiddle.net/2tzp19se/