Using custom types

vertuzzi

I am having some problems creating custom types for my data table.

My table initialization looks like this:
[code]
drawTable['#<?= $tab ?>'] = function() {
$('#sites_<?= $tab ?>').dataTable({
'iDisplayLength' : 25,
'aaSorting': [[5, 'desc']],
'aLengthMenu': [[25, 50, 100, -1], [25, 50, 100, 'All']],
'aoColumns' : [
{'sType' : 'formatted-num'},
null,
null,
null,
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'}
]
})
};
[/code]

And then:

[code]
$(document).ready(function() {
drawTable['#<?= $tab ?>']();
drawnTable['#<?= $tab ?>'] = true;
});
[/code]

The $tab is to select some values from server.

That works well for the custom types, but I need to create my own type. How do I do so? I have been reading some of the examples here: http://www.datatables.net/plug-ins/type-detection but all of them seem to be done for tables started with only [code]`$(document).ready(function() {
$('#example').dataTable();
} );`[/code]

Not really sure how to implement at least one of those to one of my columns, if I could at least do that I would just write my own function. How do I specify a column to use the custom type that I included on the top?

Thank you!!!

fbas

the sType is how you associate a custom type with a column. you're already doing that right.

what you do to create your own types is simply create an ascending sort function and descending sort function for your type

see examples at http://www.datatables.net/plug-ins/sorting

for an sType: "anti-the", here are examples of ascending and descending functions. these are like classic strcmp() functions that return 0 if equal, -1 if a < b, and 1 if a > b.
[code]
jQuery.fn.dataTableExt.oSort['anti-the-asc'] = function(a,b) {
var x = a.replace(/^the /i, "");
var y = b.replace(/^the /i, "");
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['anti-the-desc'] = function(a,b) {
var x = a.replace(/^the /i, "");
var y = b.replace(/^the /i, "");
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]


sort detection functions are a little more involved, but not needed if you explicitly set the sType (as far as I know)

vertuzzi

Hi fbas,

Thanks very much for your answer, but I still do not understand how to use it... How would you use it the "anti-the" one? What do I specify in sType? I don't see 'anti-the' anywhere :(

vertuzzi

OK got it, I guess the 'asc' and 'desc' part are splitted maybe inside the main js?

fbas

"anti-the" is an example sort type (someone wrote this and it's available in the plug-in section). it allows sorting column values by ignoring the first word if it is "the". so "The English Patient" sorts by "English" not "The English" and is not next to "Trainspotting" or "The Transporter".

your own sType can have whatever name you like. in this example, I create a new sType called "custom" by defining an ascending sort and descending sort function for it.
[code]
// these 2 functions both define a "custom" type - really this is just a copy of "anti-the" but showing you can use whatever name you want
jQuery.fn.dataTableExt.oSort['custom-asc'] = function(a,b) {
var x = a.replace(/^the /i, "");
var y = b.replace(/^the /i, "");
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['custom-desc'] = function(a,b) {
var x = a.replace(/^the /i, "");
var y = b.replace(/^the /i, "");
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
[/code]

you then specify the sType to use for your column using the type name above (but take off -asc/-desc)
in the example below, I set columns 4, 7, and 8 to use "custom" type, which uses the 2 functions above. one function is used for ascending sort, the other is used for descending sort.
[code]
drawTable['#<?= $tab ?>'] = function() {
$('#sites_<?= $tab ?>').dataTable({
'iDisplayLength' : 25,
'aaSorting': [[5, 'desc']],
'aLengthMenu': [[25, 50, 100, -1], [25, 50, 100, 'All']],
'aoColumns' : [
{'sType' : 'formatted-num'},
null,
null,
null,
{'sType' : 'custom'},
{'sType' : 'formatted-num'},
{'sType' : 'formatted-num'},
{'sType' : 'custom'},
{'sType' : 'custom'},
{'sType' : 'formatted-num'}
]
})
};

[/code]

vertuzzi

Thanks :)