Sort column by numerical range?

jacob

Hey ya'll.

I need to sort a column by age range. Example:

7 - 9
10 - 12
13 - 17
10 - 12
10 - 12
13 - 17
7 - 9
7 - 9
13 - 17

Is this possible?

Thanks,
Jacob

allan

Hi Jacob,

What you would need to do is create a plug-in sorting function for your custom sort, such that it will perform it as you require. There is documentation on how to do that here: http://datatables.net/development/sorting . There are a number of examples of other sorting plug-ins here: http://datatables.net/plug-ins/sorting

Allan

jacob

Thanks Allan! Much appreciated.

jacob

Here's the code I have and I can't quite get it to work. Any help/pointers/tips are greatly appreciated it.

The data for my fourth column looks like the following:

7-9
10-12
13-17
10-12
10-12
13-17
7-9
7-9
13-17


My custom plugin looks like the following:

jQuery.fn.dataTableExt.oSort['age-asc'] = function(x,y) {

x = x.split("-");
y = y.split("-");

//console.log("X: ", x[0]);
//console.log("Y: ", y[0]);
//console.log( x[0] < y[0]) ? -1 : ((x[0] > y[0]) ? 1 : 0 );

return (x[0] < y[0]) ? '-1' : ((x[0] > y[0]) ? '1' : '0');
};

jQuery.fn.dataTableExt.oSort['age-desc'] = function(x,y) {

x = x.split("-");
y = y.split("-");

//console.log("X: ", x[0]);
//console.log("Y: ", y[0]);

return (x[0] > y[0]) ? '-1' : ((x[0] < y[0]) ? '1' : '0');
};


And my initialization code looks like the following:

$("#camp_table").dataTable( {
// "sPaginationType" : "scrolling",
"sDom" : '<"top">t<"bottom">',
"iDisplayLength" : 100,
"aoColumns" : [
null,
{ "bSortable": false },
null,
{ "sType": "age" },
null,
null
]
});


I'm obviously doing something wrong.

Any ideas?

Many thanks,
Jacob

p.s. a live example can be seen here: http://bluecompasscamps.com/table-demo
password: table-demo

I'll be updating the table styles shortly.

fbas

looks like you're doing string comparisons unless you parse the values to int.

[code]x0 = parseInt(x[0]);
y0 = parseInt(y[0]);

return (x0 > y0) ? '-1' : ((x0 < y0) ? '1' : '0');
[/code]

jacob

That works great! Thanks, fbas.

here's the final code for anyone interested:


jQuery.fn.dataTableExt.oSort['age-asc'] = function(x,y) {

x = x.split("-");
y = y.split("-");

x0 = parseInt(x[0]);
y0 = parseInt(y[0]);

return (x0 > y0) ? -1 : ((x0 < y0) ? 1 : 0);

};

jQuery.fn.dataTableExt.oSort['age-desc'] = function(x,y) {

x = x.split("-");
y = y.split("-");

x0 = parseInt(x[0]);
y0 = parseInt(y[0]);

return (x0 < y0) ? -1 : ((x0 > y0) ? 1 : 0);

};


$("#camp_table").dataTable( {
"sDom" : '<"top">t<"bottom">',
"iDisplayLength" : 100,
"aoColumns" : [
null,
{ "bSortable": false },
null,
{ "sType": "age" },
null,
null
]
});