Datatables jQuery事件适用于第二页，而不是休息 [英] Datatables jQuery event works on second page, not on rest

问题描述

当您在第二个页面上进行分页时，我做了以下jQuery事件，实际上有效。

I have made the following jQuery event which actually works when you paginate on the second page.

但是不会触发第三个和其他页面，没有console.log错误。

However it does not trigger on the third and rest of pages, no console.log errors.

问题显然在于DataTable上的DOM重建我认为initComplete参数仅适用于第一个结果数据表，这就是为什么它只在第二个结果页面上调用我的status_icons（）函数而不是其余部分。

Issue obviously lies on the DOM reconstruction over DataTable initComplete parameters which I guess are being applied only for the first results datatable, that is why it only calls my status_icons() function on the second results page and not the rest.

我的全局函数触发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);

使用

https://cdn.datatables .net / 1.10.10 / js / jquery.dataTables.js

推荐答案

那些分页按钮被重新绘制...

因此将它们视为动态。

Those pagination buttons are redrawn...
So consider them as "dynamic".

事件委托。

使用 $（document）.on（'click'，'。paginate_button'，function（）{从静态元素开始查找，该元素将事件委托给其实际匹配的子元素。

Use $(document).on('click','.paginate_button', function() { to start the lookup from a static element which will delegate the events to its actual matching childs.

CodePen
;）

CodePen ;)

这篇关于Datatables jQuery事件适用于第二页，而不是休息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！