Multiple instances of DataTable on independent tables

le_shatai

Hi

How can I instantiate DataTable on multiple independent tables
independent with the meaning that I have several tables, wiht different column count
and different column data. I want to use DataTable i make it possible so sort and filter
every table independent of the other ones. Somehow I don't get it work.

I already used this code, but it does not work, as I am getting an error.
[code]
jQuery(target + ' table.searchable').each( function(){
var oTable = jQuery(this).dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"aLengthMenu": [[10,25,50,-1],[10,25,50,'Alle']],
"oLanguage": {
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge vorhanden.",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suche über alle Spalten:",
"sUrl": "",
"oPaginate": {
"sFirst": "Erster",
"sPrevious": "Zurück",
"sNext": "Nächster",
"sLast": "Letzter" }
}
});

jQuery("tfoot input", this).keyup( function () {
oTable.fnFilter( this.value, jQuery("tfoot input").index(this) );
});
});
[/code]

The error I get is
[quote]
e.aoPreSearchCols[b] is undefined
true; if(typeof b=="undefined"||b===null)...a;R(b)};this.fnSortListener=function(a,\n
[/quote]

Can someone please help me out ?

Regards

le_shatai

Does anybody has any idea ? Is this possible at all ?

fbas

you can. but if you keep overwriting your oTable variable, your filter will only work on whatever oTable is pointing at.

is the target var unique?

you could make oTable an array and index the various tables by target

le_shatai

Hi fbas

The 'target' var is usually pointing to a div but can be any element that can hold the id attribute.
So 'target' designates an element which can contain a table of css class 'searchable' and is used to
attach event handler etc. to dynamically added DOM elements.

le_shatai

Hi fbas

Thanks for the hint with the array. I finally got it to work.
That's the code for it. Hopefully this helps anyone with the same problem.

[code]
searchDataTable: function(target){
// target an element which contains tables
// that should be searchable via datatable
if( !target.match(/#.+/) )
target = '#'+target;

// array for storing the datatable objects
var datatables = new Array();

// push every datatable and the element id into array
jQuery(target+ ' table.searchable').each( function(){
datatables.push( {
'id': jQuery(this).attr('id'), // id of the table
'table': jQuery(this).dataTable( /* INIT STUFF */)
}
);
});

// attaching the keyup handler to every tfoot input element
jQuery(target+ " table.searchable tfoot input").each( function(){
jQuery(this).keyup( function () {
// getting the table id the input fields belongs to
var tableId = jQuery(this).parent().parent().parent().parent().attr('id')

// iterating over all datatable object
// and fetching the appropiate entry
for(var i=0;i<(datatables.length);i++){
if( tableId == datatables[i].id ){
// filtering the table
datatables[i].table.fnFilter(
jQuery(this).val(),
jQuery('tfoot input', datatables[i].table).index(this) );
}
}
});
});

},

[/code]