Disable/Enable sort button

tnthieu

Hello

I have a datatable and a button Enable/Disable sort. When user click on this button, I will disable sort function of the table. This mean the sort arrows are still there but when user click on the column header, the column will not be sorted. If I re-click the Enable/Disable button, the column can be sorted.

Could you tell me how to do?

thank you

colin

There isn't an API to disable/enable ordering, it's only an initialisation option, ordering. You would need to remove the listeners from the table header cells when you wish to prevent the ordering, then when you want to enable, re-add then with order.listener(),

Colin

tnthieu

hi @colin ,

Could you give me code to remove the listener? The order.listener() only add listener but not remove.
This is the selector of table's header $('.jobs-table tr th')

thank you

rf1234

https://editor.datatables.net/reference/api/off()

tnthieu

HI @colin and @rf1234

I found this https://datatables.net/forums/discussion/3638/disable-sorting-when-clicking-on-headers

I use $('th').unbind('click.DT') to unbind the sort event and it works correctly
but how can I rebind the click event?

I tried to use this
for(var i=0; i< oTable.fnSettings().aoColumns.length; i++){
oTable.fnSortListener($('thead.theadergray th:eq('+i+')'), i);
}
but it seems the code is in old version of jquery and it does not work.
How can I do in new version?

Thank you

tnthieu

I think I found it

    var table = $('#jobs-table').DataTable();
    table.columns().eq(0).each(function (index) {

        var header = table.column(index).header();

        table.order.listener(header, index);
    });

If it's not correct please tell me

thank you

kthorngren

Using order().listener(), as Colin mentioned, you could use something like this for each column:
table.order.listener('#example th:eq(1)', 1);

Where #example is the table id.

You could loop through each column and use the above. However to support hidden columns something a bit more comprehensive is needed. Here is an example:
http://live.datatables.net/rebopozu/1/edit

It loops through each column. Gets the column header which is used as the jQuery selector to unbind the click event and to rebind using order().listener(). You can toggle the Position column's visibility to test.

Kevin