DataTables 在最后一个“下一个”或任何“上一个”分页按钮上中断

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>');
        }
    });
}

DataTable 构造 - 在 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 事件用于在每次点击 .paginate_button 时执行我的函数，因为 DataTable 重建

$(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

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

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

但是，就您想要实现的目标而言，您的方法有些夸大或“错误”。 dataTables 有一个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
      }
    }
  }
],

你很好。它解决了这两个问题：一个没有点击操作，您根本不必担心页面更改 - 一个重复插入的字体真棒图标。

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

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

Answer 2

只需使用.html() 而不是.replaceWith()。

.replaceWith() 不仅替换了td 内容...
但将 td 本身替换为传递的参数（字符串或对象）。

更新CodePen