Still, Column Ordering Will Not Clear - implement with DataTables API
Still, Column Ordering Will Not Clear - implement with DataTables API
SDSurfer
Posts: 3Questions: 1Answers: 0
DataTables version: 1.10.13
Included libraries:
- DataTables 1.10.13
- Buttons 1.2.4
- Column visibility 1.2.4
- ColReorder 1.3.2
- FixedColumns 3.2.2
- FixedHeader 3.1.2
- KeyTable 2.2.0
- Responsive 2.1.0
- jQuery v1.11.1 (don't ask . . . we'll be here all day, yes it's outdated but not the problem)
Browsers: any
Using the DataTables API, not the object oriented dataTables
The problem: Once a user selects a column sorting, none of the clear methods on either reload or action on a button clear the column sorting selection. We just want to set it back to the natural order output server side.
For example the default ordering is column 2, the created date. Using the arrows in the table headers in DataTables I reorder by column 3, last modified. When I reload the page or hit the "clear filters" button, the method colReorder.reset() should clear the selected ordering. It does nothing.
I have been at this all day, mostly on this site, and it's still broken. I started with 1.10.0 and tried to use the fnSortNeutral plugin, threw various errors depending on how we tried to implement it.
Where we are now: Version 1.10.13 with the above build, no errors but it just doesn't DO anything. :-) All advice would be appreciated.
Task 1: On document ready, per the documentation,
https://datatables.net/reference/api/colReorder.reset()
this should clear the column selections, it does not. This snippet is loaded on document ready:
DT = jQuery('#tbl-wrap table').DataTable({
**"colReorder": true,**
"processing": true,
"serverSide": true,
"stateSave": true,
"bAutoWidth":false,
"deferRender": true,
"oLanguage": {
"sLengthMenu": "Show: _MENU_ ",
"sSearch": "_INPUT_"
},
"ajax": sOurAjaxUrl,
"columns": [
{ "data": "id", "name": "id" },
{ "data": "cr_date", "name": "cr_date" },
{ "data": "last_modified" , "name": "last_modified" },
// ETC. : all our columns
],
// To search via the filter form, the columns must be on the page. Set these hidden.
"columnDefs" : [
{ "targets": [9, 10, 11, 12, 13, 14, 15], "visible": false, },
],
"search": {
"regex": true
},
// Once a column has been selected, this is not honored on reload!
"order" : [[1, 'desc']],
"fnDrawCallback": function(oSettings, oData) {
// We do some stuff to the DOM here
} // fnDrawCallBack
}).colReorder.reset(); // <--------- FAILS, but otherwise draws
Task 2: Alrighty then, that doesn't work, we have a clear filters button that works fine to clear all of our custom search fields across the column headers. This works great, but the reset() method doesn't work on the sort order. On load of the document, we attach the event to the button like so:
// Clear Filters button - clickEvent is either 'click' or 'touchstart' depending
jQuery('#clear-filters').on(clickEvent, function(e) {
// The filter code which all works perfectly here
DT.colReorder.reset().draw(); // <-------- FAILS, but otherwise draws
return false;
});
It will draw the changes to the column search headers but will NOT include the changes to ordering.
Can someone please let me know what we're doing wrong here?
Answers
OOPS ignore the asterisks here:
**"colReorder": true,**the bold doesn't work within code.Okay, well, solved my own problem, maybe this will be of use to someone. :-)
I never got colReorder to work. I just had to find a different way. AFAIK it doen't work, at least the way I implemented it.
One of the things I'd forgotten about DataTables is it makes use of HTML5 localStorage and sessionStorage. So with stateSave enabled, that is where it's storing column order.
1. I convinced business that if you want to save state, you can't clear on every load. so by leaving stateSave enabled,
https://datatables.net/reference/option/stateSave
https://datatables.net/examples/basic_init/state_save.html
... and setting a shorter duration,
https://datatables.net/reference/option/stateDuration
... we arrived at an amicable solution. If users have been away for a half hour, the search params all reset. Otherwise, their state is maintained unless they change it, or hit the button in #2. This means all the colReorder stuff, even though it doesn't appear to work, can be removed.
2. Which brings us to the original problem, clearing column order and the clear button: previously we step through the values of the header forms and set them to empty, but I'm still working on this, it may not even be necessary to do that. Added to my function to clear search params is the method built into DataTables to simply clear state. So jQuery.on(clickEvent, '#clear-button', function () contains . . . .
... the bulk of initializeDataTable is in the original post. Important, you must add the destroy method at the top of initializeDataTable() or D.T. won't let you re-initialize:
The last approach was gleaned from one single post here:
https://datatables.net//forums/discussion/comment/68102/