How to refresh DataTables after call to page event?

Question

Here is my scenario ...

I am using pagination with DataTables. My first column is css styled based upon data that is passed in. So, I display the correct colored icon for the property of the item in the table. Everything on page 1 displays correctly. Just doing the basics, everything on further pages does not get displayed because it is removed from the DOM at that time.

So, I did $('#my_id').on('page.dt', function() {perPageFunctionCall();}).dataTable(so on an so forth)}; to call a function which selects the correct colored flag.

When I click on page 2, nothing gets updated. I click on page 1 again and it redisplays the 1st page correctly. I click on page 2 a second time now and it displays everything correctly this time.

So what is causing the display not to update with my new css the 1st trip but to display properly on subsequent trips? Is there someway to refresh the element or the data table after I am done with my css manipulation?

Answer 1

Well it is one of two things:

Either it is

1: I added

    .on( 'order.dt',  function () { perPageFunctionCall(); } )
    .on( 'search.dt', function () { perPageFunctionCall(); } )

in addition to my page function call.

But more likely everyone's favorite reason:

2: Caching

In either case, it does work flawlessly now as expected.

Answer 2

for refresh resp. table :

var path = "/server_processing.php";

var dt = $('#tableid').DataTable();
dt.clear();
dt.draw();
dt.ajax.url(path).load()