Sorting on datatable, when have inner

StanAccy

I'm using Datatables v1.9.4, and I hooked up naturalSort.js to sort my table. All was working fine until I styled the site, and now the table has inner inside the elements. Now the sort routines are being passed 03/04/14 11:17 PM as parameters, rather than the actual text value to be displayed to the user, thus sorting no longer works.

Is there a way to tell Datatables only to try and sort on the text content of the cell, and not the entire markup contained within it?

StanAccy

As a followup, Im aware of the sStype : html setting. This works fine for simple nested HTML, like:
Foo but does not work for a containing a multichoice (select with options), or hidden inner divs that are used as tooltip popups.

Is there any way to get the *displayed* cell value that's shown to the user?

I tried tweaking my natural-sort init as follows, but this only fixes the easy case:
[code]
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"natural-asc": function (a, b) {
var x = a.replace(/[\r\n]/g," ").replace( /<.*?>/g, "" );
var y = b.replace(/[\r\n]/g," ").replace( /<.*?>/g, "" );
return naturalSort(x, y);
},

"natural-desc": function (a, b) {
var x = a.replace(/[\r\n]/g," ").replace( /<.*?>/g, "" );
var y = b.replace(/[\r\n]/g," ").replace( /<.*?>/g, "" );
return naturalSort(x, y) * -1;
}
});
[/code]

allan

Have a peak at this example for live sorting: http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html

However, DataTables should automatically strip HTML. There is a bug in 1.9.4 I think that might effect this. Try 1.10...

Allan

StanAccy

Thanks Allan, much appreciated. ill try with 1.10b2 today.
I also noticed a problem (at least with my limited JS skills, I think I fixed a problem) with the datetime-us format plugin that's listed on the site - what's the best way to get that corrected - you or the original author?

StanAccy

With 10b2, and this function (stored in my JS file, naturalSort.js - all part of the datatables init):

/* Create an array with the values of all the select options in a column */
jQuery.fn.dataTableExt.afnSortData['dom-select'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') div select option:selected', tr).text();
} );
};

I'm getting an exception with the following stack:

Uncaught TypeError: undefined is not a function naturalSort.js:131
jQuery.fn.dataTableExt.afnSortData.dom-select naturalSort.js:131
_fnSortData jquery.dataTables-1.10b2-ver-1396991518000.js:4583
_fnSort jquery.dataTables-1.10b2-ver-1396991518000.js:4294
_fnReDraw jquery.dataTables-1.10b2-ver-1396991518000.js:1944
_fnSortListener jquery.dataTables-1.10b2-ver-1396991518000.js:4493
(anonymous function) jquery.dataTables-1.10b2-ver-1396991518000.js:4524

Line 131 is the first return statement in the function above, cursor is placed in between .oApi. and _fnGetTrNodes

With 1.9.4 everything works fine.

allan

Looks like you need to update your live DOM sorting function: http://next.datatables.net/examples/plug-ins/dom_sort.html .

Allan

StanAccy

That would explain it, thanks! Has the 'sSortDataType' value also been replaced with 'orderDataType'

v1.9.4 http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html
to v1.10b2 http://next.datatables.net/examples/plug-ins/dom_sort.html

Nick

allan

> Has the 'sSortDataType' value also been replaced with 'orderDataType'

Yes and no! You can use either option. See: http://next.datatables.net/upgrade/1.10-naming

Allan