How to disable the sorting click on table header when server side data is still processing?

Question

Hi All, I'm doing the server side sorting in datatable plugin .Data takes 4-5 seconds to load, in the mean time if the user clicks on other headers it will again trigger the ajax call. Please help me on how to restrict the user when the servers side data is still in processing state. Is there any initial function where i can check custom Flag status & stop the sortable till processing is done.??

Highly appreciate the quick response.

Thanks, Janardhan

Answer 1

When you first get the request, disable the button. Then enable the button in a callback function which is triggered when the server finishes. That's how you'd do it, but if you want code, then give code.

Answer 2

Just a quick tip:

• set async: false
• disable sorting buttons
• enable them upon successful request

Answer 3

If memory serves me correctly jquery has 3 functions like ajaxStart(), ajaxError() and ajaxComplete().

Simply disable the whole grid/just the grid header when ajaxStart and enable it again when either ajaxError (where you can do some error handling) or ajaxComplete.

Answer 4

Hello, there are a variety of ways to do this, the easiest will depend on your code.

$(document).ajaxSend( function(){
   $('controls_selector').hide();
}).ajaxComplete( function(){
   $('controls_selector').show();
});

Will do it, however this will disable them for the duration of any ajax event on your page. The documentation describes how you can use the callback function's parameters to determine the nature of the ajax call and selectively show/hide those elements.

This way you can avoid digging in and playing with the code for the plugin.

Let me know if you need more info/help, Good luck :)

===================

update: the sticking point seems to be that you don't want to hide the elements, you want a way to temporarily disable the event handlers and since they are buried in datatables you don't want to modify them. I would do the following:

var tableheadclone = $('#mytableid thead>tr>th').clone(true);

then write that clone somewhere else and hide it (or keep it in a global js variable). You can then use

$('#mytableid thead>tr>th').unbind('click');

to remove the event handler.

You can re-instate the event handler using the replaceWith() jquery function.

More information or code would be helpful if you can't work it out from here.