Date sorting

GarfieldKlon

Hi :)

I want to sort a table with a column of dates. (20.4.2012)
I've copied https://github.com/sedovsek/DataTables-EU-date-Plug-In/blob/master/dataTables.dateFormat.js this to my project.

The one who has initially created dataTables for that project has written this code snippet:

[code]
$('.content .dataTables table').each(
function(i)
{

var el = $(this);
var config = {
'sDom': '<"processing" r>t',
'bInfo': false,
'oLanguage': {
'sLengthMenu': ' _MENU_',
'sInfoEmpty': '0/0',
'sInfo': '_START_-_END_ / _TOTAL_',
'sInfoFiltered': '',
'sEmtpyTable': 'no Data',
'sProcessing': 'processing...',
'sSearch': 'Filter:',
'sZeroRecords': ''
},
// 'sScrollXInner': '110%',
'oFeatures': {'bProcessing': true},
'bAutoWidth': true,
'bFilter': el.hasClass('filter'),
'bSort': el.hasClass('sort'),
'aaSorting': [], // no inital sorting
'bSortCellsTop': el.find('thead tr:first').hasClass('sort'),
'bSortClasses': false,
'bSearchable': el.hasClass('filter'),
'bPaginate': el.hasClass('paginate')
};
...
..
.
[/code]

So this apply to all dataTables in the project. And of course, not all tables looks the same and don't have the same amount of columns etc.

So how can I achieve it, that on a particular table a rule like this takes effect:

[code]
"aoColumns": [
null,
{ "sType": "eu_date" },
null
]
[/code]

I've tried to put a JavaScript only on the site with that particular table:
[code]

$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "sType": "eu_date" },
null
]
} );
} );

[/code]

But that doesn't work.

Any idea?


greez
GarfieldKlon

dmsdev

This won't be a solution for everyone but I skipped the whole date sorting issue by simply including the timestamp in the column but hiding it with CSS like so:

[code]
1331899233 16/03/12
[/code]

dataTables will then just sort by timestamp which will have the desired result. It also means you can output the date in any format you like without having to follow strict rules.

I hope that helps

Dev.

allan

@dmsdev: Absolutely - brilliant way of doing it. There is a plug-in which will read the title attribute of the span tag (if it has one) here: http://datatables.net/plug-ins/sorting#hidden_title .

@GarfieldKlon: Can you run your table through the debugger please: http://debug.datatables.net

Allan

GarfieldKlon

@dmsdev:
Great idea!

@allan:
Thanks for the hint with your plugin. But how could I tell my table to sort that specific column with your 'title-numeric-asc'? I have to give that column that value, right?

Something like:
[code]
config['aoColumns'] =
[
null,
null,
null,
{ "sType": "title-numeric" },
null,
null,
null,
null
]
[/code]

allan

That looks right to me - if tha doesn't work, run it through the debugger and post the debug code.

Allan

GarfieldKlon

At the moment there is only one date pattern on the site --> dd.mm.yyyy , so I won't implement that with the timestamp by now, but I'll keep it in mind :)

I fill up 'aoColumns' depending on the css class of th:
[code]
function fillaoColumns(el)
{
var aoColumns = [];
el.find('thead tr.sort th').each(
function(z)
{
if($(this).hasClass('date'))
{
aoColumns.push({"sType": "eu_date"})
}
else if(!$(this).hasClass('sort'))
{
aoColumns.push({"bSortable": false});
}
else
{
aoColumns.push(null);
}
});

return aoColumns;
}
[/code]

el is the table.

Thanks a lot for helping :-)