Restoring initial ordering

jackPearson

I have an initial ordering that works they way that most users want. However, users may decide to try their own ordering by using the column controls. I have a button (Default Sort) that is intended to restore the table to the initial state. However, it only seems to partially work. The click call back happens and some ordering related to the ordering desired happens but the resulting ordering seems to retain some of the user's column selections. (The default ordering is based on some invisible columns).

const defaultOrder = [[10, 'asc'], [11, 'asc'], [9, 'asc'], [3, 'asc']];

const targetTable = $targetTable.DataTable({
            paging: false,
            dom: 'ritri',
            order: defaultOrder,
            columns: [
...
       $('#btn-default-sort').on('click', function () {
            targetTable.order(defaultOrder).draw();
        });

The DataTables Debugger shows no failures or warnings. (Data uploaded to https://debug.datatables.net/otuzob ).

How can I get get the original ordering?

jackPearson

Of course, once you post something you realize the answer. I needed to clear the sorting columns back to the initial state, too.

$('#btn-default-sort').on('click', function () {
            $('.sorting_asc, .sorting_desc')
                .removeClass('sorting_asc')
                .removeClass('sorting_desc')
                .addClass('sorting');
            targetTable.order(defaultOrder).draw();
        });

jackPearson

The real problem is that the ordering "const" object is getting changed when the column headers are activated. The solution is is to make a deep copy of the defaultOrder object so that modification to the order does not change the original object.

So, the revised version is now:

const defaultOrder = [[10, 'asc'], [11, 'asc'], [9, 'asc'], [3, 'asc']];
 
const targetTable = $targetTable.DataTable({
            paging: false,
            dom: 'ritri',
            order: $.extend(true, [], defaultOrder),
            columns: [
...
       $('#btn-default-sort').on('click', function () {
            targetTable.order($.extend(true, [], defaultOrder)).draw();
        });

colin

Glad that's all sorted

C