Column sorting only works for one column (v1.6.2)

bhansen

I'm stumped. The code shown below will do an initial sort on the Name column and sorts that column fine. Unfortunately the other 3 columns do not sort properly and appear to be controlled by the Name column since clicking the Name column always stays in asc or desc alphabetical order.

Sorting is working fine in another table with the identical initTable function. Is it a result of the table cell values being wrapped in elements?

Here is my code:

JavaScript
[code]


function initTable() {
/* Apply custom classes to table headers */
$.fn.dataTableExt.oJUIClasses.sSortAsc = "sorted_asc";
$.fn.dataTableExt.oJUIClasses.sSortDesc = "sorted_desc";

$('#data-grid').dataTable(
{
"sPaginationType" : 'full_numbers',
"iDisplayLength" : 50,
"aaSorting" : [[ 0, 'asc' ]],
"aoColumns" : [
null,
null,
null,
null
],
"bJQueryUI" : true

});
}

$(function() {
initTable();
});


[/code]

HTML snippet of the table experiencing the problem
[code]




Name


Status


Email


Login






Horatio Hornblower


Deactivated


hblower@gmail.com


horatio




Inca Louise


Active


inca@test.com


incalouise




Mister Bill


Deactivated


mrbill@gmail.com


mrbill




Xavier Lewis


Password reset


aaa@test.com


xavier





[/code]

bhansen

Update:

OK, so I confirmed that the problem is related to the SPAN that wraps the table cell values. I thought that the DataTables sort would strip these out.

I have tried defining my aoColumns with the following values but it doesn't fix the issue:

[code]
"aoColumns" : [
{"sSortDataType": "dom-text", "sType" : "string"},
{"sSortDataType": "dom-text", "sType" : "string"},
{"sSortDataType": "dom-text", "sType" : "string"},
{"sSortDataType": "dom-text", "sType" : "string"}
]
[/code]

Maybe I am using the wrong values? Any help is much appreciated.

allan

Set the sType to 'html' to have the HTMl stripped. sSortDataType is only needed when you need to use live DOM data (which you don't in this case since it's a static string, as opposed to a user input field). If you look at the dom-text function you should be able to see that it is looking for an input element.

Allan

bhansen

Thank you very much for your help!

Regards,
Brian