我创建了下面的jQuery事件,当您在第二个页面上分页时,它实际工作。
但是,它不会在第三页和其余页上触发,没有console.log错误。
问题显然在于DataTable initComplete参数上的DOM重构,我猜这些参数只应用于第一个结果数据表,这就是为什么它只在第二个结果页面上调用我的status_icons()函数,而不是其余页面。
触发DataTable的单击时分页事件的全局函数
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" aria-hidden="true"></i>');
$(this).find('.btn-success').eq(0).prop("disabled", true);
$(this).find('.btn-success').eq(0).text('Paid');
} else {
$(this).find('td').eq(0).replaceWith('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0" aria-hidden="true"></i>');
}
});
}
这是我构造DataTable的方式,对第一个结果页和其余页调用上述函数
setTimeout(function() {
$('#invoices-table').DataTable({
responsive: true,
columnDefs: [{ orderable: false, targets: [-1, -2, -3] }],
"lengthMenu": [
[100, 5, 25, 50, -1],
[100, 5, 25, 50, "All"]
],
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
// ...
$('.paginate_button').on('click', function() {
status_icons(); // it executes for the second page but not for the rest
});
}
});
}, 3000);
使用
2条答案
按热度按时间u0njafvf1#
这些分页按钮被重新绘制...
所以把它们看作是“动态的”。
这里需要event "delegation"。
使用
$(document).on('click','.paginate_button', function() {
从静态元素开始查找,该静态元素将事件委托给其实际匹配的查尔兹元素。CodePen ;)
b4lqfgs42#
使用
drawCallback
函数而不是iniComplete
,它解决了我的问题。