Question

我有以下DataTable调用 status_icons（）函数替换0＆amp;带图标的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);

每次因为DataTable重建而点击.paginate_button时，

jQuery事件用于执行我的函数

$(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将事件委托给document对象。此外，dataTables完全窃取了click事件，阻止您向.paginate_buttons添加额外的click事件处理程序。 .paginate_button上的工作事件处理程序将是

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

然而，你的做法有点夸张或错误＆＃34;在你想要实现的目标的背景下。 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 - ＆gt; http://jsfiddle.net/2tzp19se/

Answer 2

只需使用.html()代替.replaceWith()。

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

更新了CodePen

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

2 个答案: