Here's the page:
http://csuvscu.com/
I need to sort by the Date Column, right now it needs to read Nov 6, Nov 5 and lastly Oct 7.
How do I do this?
Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want. The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' (descending ordering) as required.
Use columnDefs option to remove sorting from a column. Pass column index in targets within [] (Indexing starting from 0) and set orderable to false . In the example, I removed sorting from email and salary column.
To hide and show columns use columns() and visible() method. Call it on dataTables instance and pass column index in columns() method and false to visible() method. Similarly, pass true to visible() if you want to show the columns.
The default behavior of DataTables allows the sorting of multiple columns at one time by holding the Shift key and clicking on the header cells in the order that needs to be sorted.
Your Current Code:
$('table').dataTable({
// display everything
"iDisplayLength": -1
});
What you could do:
oTable = $('table').dataTable({
// display everything
"iDisplayLength": -1
});
oTable.fnSort( [ [0,'desc'] ] ); // Sort by first column descending
But as pointed out in the comment below, this may be a cleaner method:
$('table').dataTable({
// display everything
"iDisplayLength": -1,
"aaSorting": [[ 0, "desc" ]] // Sort by first column descending
});
DataTables uses Alphabetical order as the default sorting method. This is actually what happens here.
There are two solution:
If you want your users to be able to sort the column by themselves you might use the first solution.
--------------- First Solution:
We need to tell the DataTable plugin what to do with our columns. You'll need to use the "aoColumns" property:
$('table').dataTable({
// display everything
"iDisplayLength": -1,
"aoColumns":[
{"sType": "shaheenery-date"},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true}
]
});
Then define the "shaheenery-date-asc" and "shaheenery-date-desc" sorting method. You also need a function "getDate" that translate the date in numeric format:
function getDate(a){
// This is an example:
var a = "Sunday November 6, 2011";
// your code =)
// ...
// ...
// You should output the result as YYYYMMDD
// With :
// - YYYY : Year
// - MM : Month
// - DD : Day
//
// Here the result would be:
var x = 20111106
return x;
}
jQuery.fn.dataTableExt.oSort['shaheenery-date-asc'] = function(a, b) {
var x = getDate(a);
var y = getDate(b);
var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
return z;
};
jQuery.fn.dataTableExt.oSort['shaheenery-date-desc'] = function(a, b) {
var x = getDate(a);
var y = getDate(b);
var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return z;
};
--------------- Second Solution:
We are going to use the "aoColumns" property as well. This time we tell DataTable to hide the last column which will contains the date in Unix Timestamp. We also need to define this column as the default one for sorting with "aaSorting":
$('table').dataTable({
// display everything
"iDisplayLength": -1,
"aaSorting": [[ 5, "desc" ]],
"aoColumns":[
{"bSortable": false},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bVisible": false}
]
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With