CODEWITHSUNDEEP
jquerydatatables
pee2pee
pee2pee

Reputation: 3792

jQuery: ColReorder set to default order

I have my DataTables initialised as below

var table = $('#today').DataTable( {
    "ajax": '/getMainData/24102019/json',
    "ordering": false,
    enableFiltering: true,
    filterPlaceholder: 'Search for something...',
    "scrollY": 300,
    "scrollX": true,
    "pageLength": 500,
    "lengthMenu": [[100, 1000, -1], [100, 1000, "All"]],
    processing: true,
    'language':{ 
        "loadingRecords": "Loading ...",
        "processing": "Loading ..."
    },
    "columnDefs": [
        {
            "targets": [ 2,14 ],
            "visible": false,
            "searchable": true
        },
        { "width": "200px", "targets": [3,16,17] },
        { "width": "300px", "targets": [15] }
    ],
    colReorder: true,
    "initComplete":  function (settings, json) {
        afterTableInitialization(settings,json);
    }
    });

// RE-ORDER COLUMNS     
        function afterTableInitialization(settings, json) {
            console.log('[+] Column reordering');
            table.colReorder.order( [ 0,1,22,23,24,25,2,3,4,5,6,13,7,8,9,10,11,12,14,15,16,17,18,19,20,21,26 ] );
            $('#loading').modal('hide');
        }

So far, so good, everything works

However I have a select menu which triggers a new ajax search as below

$('select#days').on('change', function() {
    $('select.multiselect').multiselect('deselectAll', false);
    table.ajax.url( '/getMainData/'+this.value+'/json' ).load();
    table.search( '' ).columns().search( '' ).draw();
});

Obviously at this point, the columns are the wrong way around.

However if I set the columns back to the original ordering, well, this doesn't actually happen/work and the data gets all out of sync with the columns. The original ordering never seems to change

Any advice?

// GET NEW DATA BASED ON DROPDOWN VALUE
        $('select#days').on('change', function() {
            table.colReorder.reset();
            $('select.multiselect').multiselect('deselectAll', false);
            table.ajax.url( 'getMainData/'+this.value+'/json' ).load();
            table.search( '' ).columns().search( '' ).draw();
            table.colReorder.order( [ 0,1,22,23,24,25,2,3,4,5,6,13,7,8,9,10,11,12,14,15,16,17,18,19,20,21,26 ] );
        });

I try the reset option and the column headers revert back to what they were initially. However the colReorder seems to be triggered before the Ajax completed so it's out of sync again

Upvotes: 0

Views: 651

Answers (1)

Danny Buonocore
Danny Buonocore

Reputation: 3777

You've tried using colReorder.reset()?

$('select#days').on('change', function() {
    $('select.multiselect').multiselect('deselectAll', false);
    table.colReorder.reset();
    table.ajax.url( '/getMainData/'+this.value+'/json' ).load();
    table.search( '' ).columns().search( '' ).draw();
});

EDIT

columnDefs: [
    {
      render: function(data, type, row) {
        return '<div>' + data + '</div>';
      },
      targets: 0
    },
    ...
]

Upvotes: 1

Related Questions