jquery data table not working from second page

The way pagination works, rows not needed by current page are removed from the DOM. Therefore any event handlers you bind directly to those elements are lost when the html is removed.

You need to use delegation syntax of on() to bind the handler to an asset in page that is permanent. This could be the parent table or any other parent up the tree, including document

$('#TableID').on('click','.icon-trash',function () {...

API Reference: http://api.jquery.com/on/


I have the same issue and I solved it by moving the below code after I call in other code.

$('#yourTable').dataTable();

Hope it will help someone.


If you just place your click event code above datatable code in js, it will working fine.

As example.

$(".icon-trash").on('click',function () {});

$("#TableID").datatable();