colReorder with stateSave and Ajax data source

droshi

I'm having a bit of an issue with this combination. If a column is moved, when the page is reloaded (or ajax source manually refreshed using ajax.reload()), then the data is put into the table in the old format, ignoring the re-ordering.

Should the framework be handling this issue? Or would a callback need to be modified by checking the stateSave variable and find out how to transform the data?

           dtEquip = $('#EquipmentGrid').DataTable({
                dom: '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"frlipB>' +
                    't' +
                    '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"lip>',
                autoWidth: false,
                processing: true,
                stateSave: true,
                colReorder: true,
                scrollX: true,
                buttons: [
                    'csv', 'excel', 'pdf', 'colvis'
                ],
                lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                order: [[14, 'desc']],
                columnDefs: [
                    { targets: [0, 1, 16], "width": "50px"}
                ],
                ajax: {
                    "url": "/ajax/data.asmx/getTable"
                }
            });
            

BTW, I'm looking at upgrading from DataTables 1.9.4 and loving all the new features. Especially the column hiding and re-ordering is amazing. Keep up the great work!

droshi

I believe I have figured this one out. Though it was a lot of work, I changed my data to use arrays with named fields, instead of just using the default numbered structure. Then setup "columns" specifying their "data" attribute.

Now when columns are moved, everything behaves as expected, and DataTables takes care of the transformation of location. Brilliant!