DataTables breaks on last “Next” or any “Previous” paginate button


I have the following DataTable which calls status_icons() function for replacing 0 & 1 values with icons.

At first results page (on initComplete) I call status_icons() for the replacement and then I make a trigger out of DataTables scope in order to have my function re-executed for next paginated results due to DataTable DOM reconstruction behavior for each pagination.

The error I get is that re-adds the status icons over the current ones when you click on the "Previous" button on any pagination or the numbered pagination boxes.

My function for replacing values with icons

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 construction - on initComplete calls the function for the first and second-page results

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

 

jQuery event for executing my function each time a .paginate_button is clicked due to DataTable reconstruction

$(document).on('click','.paginate_button', function() {
  if( !$(this).hasClass("disabled") ){
    status_icons(); // it executes for the rest paginations
  }
});

https://codepen.io/anon/pen/Wjqbbd


Asked by:- jaya
1
: 225 At:- 5/30/2017 12:28:14 PM
jquery datatable javascript






1 Answers
profileImage Answered by:- vikas_jk

Solution is to use .html() instead of .replaceWith(). in my function

function status_icons() {

    $('table tr').each(function() {
        if ($(this).find('td').eq(0).html() == '1') {
            $(this).find('td').eq(0).html('<i class="fa fa-3 fa-check-circle-o datatable-paid-1"></i>');
        } else {
            $(this).find('td').eq(0).html('<i class="fa fa-3 fa-exclamation-circle datatable-paid-0"></i>');
        }
    });

}
1
At:- 5/30/2017 1:02:48 PM
Thank you it is working now 0
By : jaya - at :- 5/31/2017 9:03:28 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use