DataTables在最后一个“Next”或任何“Previous”分页按钮上中断
我有以下DataTable调用status_icons（）函数用于用图标替换0和1值。
在第一个结果页面（ 在initComplete上 ）我调用status_icons（）进行替换，然后我从DataTables范围中触发，以便为每个分页的DataTable DOM重建行为重新执行我的函数以用于下一个分页结果。
我得到的错误是当您单击任何分页或编号分页框上的“上一步”按钮时， 重新添加当前状态图标 。
我用图标替换值的function
function status_icons() { $('table tr').each(function() { if ($(this).find('td').eq(0).text() == '1') { $(this).find('td').eq(0).replaceWith(''); } else { $(this).find('td').eq(0).replaceWith(''); } }); } 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
通常，将事件委托给document对象是一件非常糟糕的事情 。 此外，dataTables完全窃取了click事件，阻止您向.paginate_buttons添加额外的click事件处理程序。 .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' ? '' : '' } else { return data } } } ],
你很好。 它解决了这两个问题：对点击缺乏动作的问题，您根本不必担心页面更改 – 以及一遍又一遍地插入复制字体真棒图标的问题。
它只是通过在dataTables想要显示列的内容时返回正确的字体真棒标记来工作。
已将您的代码移植到jsfiddle – > http://jsfiddle.net/2tzp19se/
只需使用.html()而不是.replaceWith() 。
.replaceWith()不仅替换了td内容……
但是用传递的参数（字符串或对象）替换td本身。
更新了CodePen