Deleting datatable while server-side processing

1
votes

I have this code:

$("#office-select").change(function(){
    oTable.api().ajax.reload();
});

where oTable is my datatable. Everything works, but I want the old table to be hidden while the new one is loading. There should only be a spinner shown.

I tried something along these lines:

$("#office-select").change(function(){
    oTable.clear();
    oTable.api().ajax.reload();
});

but it did not work. Any ideas on how to achieve this?

2
jqueryajaxdatatables

2 Answers

0
votes

You can use jQuery BlockUI

Example: 

$("#office-select").change(function(){
  $(<selector of your table>).block({ 
            message: '<h1>Processing</h1>', 
            css: { border: '3px solid #a00' } 
  }); 
  oTable.clear();
  oTable.api().ajax.reload();
  $(<selector of your table>).unblock();
});
0
votes

try oTable.clear().draw(); instead of oTable.clear(); You need to tell the API to render the change:

$("#office-select").change(function(){
    oTable.clear().draw();
    oTable.api().ajax.reload();
});