Datatables jQuery event works on second page, not on rest

Question

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

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

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.

My global function which triggers for DataTable's pagination on click event

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

This is how I construct my DataTable, calling above function for first results page and the rest

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

Using

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

Try `$(document).find('.paginate_button').on(...` – Louys Patrice Bessette May 28 '17 at 19:48 — Louys Patrice Bessette, May 28 '17 at 19:48

Louys Patrice Bessette · Accepted Answer · 2017-05-28T20:11:35.580

3

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

The event "delegation" is needed here.

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

edited May 28 '17 at 20:11

answered May 28 '17 at 19:50

Louys Patrice Bessette

33,375
6
36
64

I very much agree with your logic however in action did not work. It keeps working till the second results page, even tried to put it out of the DataTable construction's scope :-/. It should work.. – May 28 '17 at 19:57
Okay... I reproduced the problem... Hold on. ;) – Louys Patrice Bessette May 28 '17 at 20:08
Merci mille fois Louys , that was really simple and educating :) Is your suggestion to keep the delegation event out of the DataTables scope (initComplete) for some reason? – May 28 '17 at 20:18
1

You can place it in the `initComplete` function is you want... No difference. ;) Bonne journée! ;) – Louys Patrice Bessette May 28 '17 at 20:20
1

On each and every `click` event that will occur in the `document`, if the `target` (element on which the event really occured) has class `paginate_button`, the event will be delagated to it. So the "scope" here, is the `document`. If you had more than on datatable in the same `document`, you should lower this "scope" to the table itself (or maybe a wrapper element of it)... It only has to be a static parent element. – Louys Patrice Bessette May 28 '17 at 20:31
Very nice! An odd issue came up after last fix, Status icons are being re-added extra to current icons each time I click on Next after last page (it should be unclickable there) or Previous button at any page https://codepen.io/anon/pen/EmzOJM – May 29 '17 at 07:27
1

mmm... add a condition within the delegated onclick, wrapping all the function: `if( !$(this).hasClass("disabled") ){...}` ----- So is the button is disabled, nothing will happen. I edited the CodePen in case this is unclear... ;) – Louys Patrice Bessette May 29 '17 at 16:03
it's doing it also in "Previous" of any page and on clicking on any numbered pagination button. I've also made that as new question https://stackoverflow.com/questions/44245955/datatables-break-on-last-next-or-any-previous-paginate-button with better explanation :) – May 29 '17 at 16:10

score 0 · Answer 2 · answered Dec 24 '22 at 02:37

0

Use the drawCallback function instead of iniComplete. It solved my issue.

answered Dec 24 '22 at 02:37

elimariaaa

796
4
10
30

Datatables jQuery event works on second page, not on rest

2 Answers2