Dynamic Default Sort Columns

bryceray1121

My goal is to be able to define a default sort column. I have multiple tables and each table will have a different column as the default sort. This rules out using aaSorting to define the default sort because it requires an index which will be used for every table. I'm assuming something like this is not possible:
[code]
"aaSorting": [
["aTargets":["dataTable-defaultSort"],"desc"]
],
[/code]

I've also tried using aoColumnDefs, however I may be misunderstanding the purpose of asSorting. In this example I've assigned a predetermined class to each column in each table I want to default sort to.
[code]
"aoColumnDefs": [
{"asSorting": ["desc"],"aTargets":["dataTables_defaultSort"]}
]
[/code]

Neither of these approaches seem to work. Is there another way I can approach this problem? Or do I need to develop my own functionality for this feature?

Thanks.

allan

You are right that it's not possible to do something quite like what you have, but all you need to do is get the index of the column with that class. $('thead th').index( $(thead th.dataTable-defaultSort)[0] ) for example (might need to refine the selectors!).

Allan

bryceray1121

I think I am getting really close but I'm not quite there.

This is what I have so far:
[code]
function setDefaultSort(){
var dataTables = getElementsByClassName("dataTable");
for(var i=0;i<(dataTables.length);i++){
var columns = dataTables[i].getElementsByTagName("th");
for(var x=0;x<(columns.length);x++){
if(jQuery(columns[x]).hasClass("dataTable-defaultSort")){
$.fn.dataTableExt.iApiIndex = i;
oTable.fnSort([x,'desc']);
}
}
}
$.fn.dataTableExt.iApiIndex = 0;
}
[/code]

This correctly identifies columns with the class that I use to distinguish a column as a default sort column. However, when it tries to apply the sort to the column I am seeing an error:

"oSettings is null"

Any suggestions on what might be causing this?

allan

Hi bryceray1121,

Where is oTable coming from? Is it a global variable? What might be easier, rather than using the API Index is something like:

[code]
function setDefaultSort(){
var dataTables = getElementsByClassName("dataTable");
for(var i=0;i<(dataTables.length);i++){
var columns = dataTables[i].getElementsByTagName("th");
for(var x=0;x<(columns.length);x++){
if(jQuery(columns[x]).hasClass("dataTable-defaultSort")){
$(dataTables[i]).dataTable().fnSort([x,'desc']);
}
}
}
}
[/code]
Allan

bryceray1121

I think I'm a little closer now. This function produced no errors. However, when it runs the value I set in sDom for the table changes (possibly to the default setting). In addition, the column I want to be set as the default sort is not sorted, instead the first column is still the default sort.

allan

Are you calling this function before or after initialising the table? I had assumed after, but it sounds like it might be before... I think if you want to do this at initialisation time it needs to be on a per table basis. Something a bit like what you have, but the initialisation done in the dataTable() call. Perhaps you could clarify the sequence of events?

Allan

bryceray1121

It is called directly after initialization. Here is the code:
[code]
var oTable = renderDataTable(".dataTable"); //Render data tables
setDefaultSort(); //Sort all columns based on class value

function renderDataTable(id) {
var oTable2 = jQuery(id).dataTable({
"sScrollY": "200px",
"sScrollX": "100%", /* Required for viewing tables with lots of columns at low resolution - otherwise columns are mis-aligned */
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
/*"bSortClasses": false,*/
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": ["dataTable-exclude"]},
{"bVisible":false, "aTargets" : ["dataTables_notVisible"]}
]
} );
return oTable2;
}
function setDefaultSort(){
var dataTables = getElementsByClassName("dataTable");
for(var i=0;i<(dataTables.length);i++){
var columns = dataTables[i].getElementsByTagName("th");
for(var x=0;x<(columns.length);x++){
if(jQuery(columns[x]).hasClass("dataTable-defaultSort")){
$(dataTables[i]).dataTable().fnSort([x,'desc']);
}
}
}
}
[/code]

allan

Ah okay - I think I might know the problem. If you show the number of elements found by jQuery(id) (i.e. alert( jQuery(id).length ) and getElementsByClassName("dataTable"), I'd think that the second one will show more...

However, I think that this is slightly inefficient - since it will cause every table to be drawn twice. How about:

[code]
var oTable = renderDataTable(".dataTable"); //Render data tables

function renderDataTable(selector) {
var out = [];
var tables = jQuery(selector);
var sorting;

for ( var i=0, iLen=tables.length ; i

bryceray1121

There appears to be an error but I've looked over it several times and can't seem to identify the error.

The error firefox spits out is:
oColumn is undefined

Several columns are set to be hidden in the dataTable init. Is it possible the index of the default sort columns is changing because they are hidden before they are sorted?

allan

I would guess that this little bit is where the trouble is:

[code]
jQuery('th', tables[i]).index("th.dataTable-defaultSort")
[/code]
Having said that - I don't see where it is... Although - perhaps this might do it:

[code]
jQuery('th', tables[i]).index("th.dataTable-defaultSort", tables[i])
[/code]
If not - then it would be worth echoing out the result of that expression and seeing what it is returning.

Also, the way the code is above, it shouldn't have any impact

Regards,
Allan

bryceray1121

You were really close. Here is the working solution in case it is helpful to anyone else.

[code]
function renderDataTable(selector) {
var out = [];
var tables = jQuery(selector);
var sorting;

for ( var i=0, iLen=tables.length ; i= 0){
sorting = [ defaultCol, 'desc' ];
}else{
sorting = [0,'desc'];
}

var oTable2 = jQuery(tables[i]).dataTable({
"aaSorting": [ sorting ],
"sScrollY": "200px",
"sScrollX": "100%",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false,
"aoColumnDefs": [
{"bSearchable": false, "bSortable": false, "aTargets": ["dataTable-exclude"]},
{"bVisible":false, "aTargets" : ["dataTables_notVisible"]}
]
} );

out.push( oTable2 );
}
return out;
}
[/code]

tomas_eklund

Helpful, indeed. Thanks!

Quite frankly I'm surprised that this functionality (being able to specify initial sorting based on class name) isn't a core feature. It seems to me that DataTables configuration relies a lot on being able to specify columns by index which in reality means that every DataTables instance have to be tailored to each specific case where it's used.

evoxix

is it possible to do this without using an index?

because all my tables are being sorted by date which i want to put in last column and in descending order as well?

allan

@tomas_eklund - an old post I know - but since this thread has bobbed back up...

> It seems to me that DataTables configuration relies a lot on being able to specify columns by index which in reality means that every DataTables instance have to be tailored to each specific case where it's used.

I agree - DataTables 1.10 is going to make naming columns and using those names much easier: http://datatables.net/development/roadmap :-).

@evoxix

> is it possible to do this without using an index?

Currently no - you need to work out the index I'm afraid. A line or two of Javascript should be able to do that. DataTables 1.10 should make this much easier.

Allan