Use of multi-filter with buttons / sDOM positioning

thowi

Hi all together,

I'd like to use the multi-filter example as shown in your examples on my table with buttons and sDOM positioning:
http://datatables.net/release-datatables/examples/api/multi_filter.html

The following code is probably crashing my grid:
[code]
var oTable = $('#tabs-1 table.display').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
});
[/code]

This is the code of my grid I'd like to use the search for:
[code]
$('#tabs-1 table.display').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
//"oSearch": {"bSmart": false},
"oTableTools": {
"sSwfPath": "modules/rfid/tools/jQueryUI/datatable/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf"/*,{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}*/
]
}
});
[/code]

I've to say:
The search itself is working fine! But the general appearance of the grid crashes as you can see and try on the site itself: http://rfid.ocserv.de/?section=mod_rfid&human
Please click "View Database Content" -> "Customers".
As you can see, the other tabs also crashed in another way...

Can you tell me how to fix this?
For better view, I'll also paste the sourcecode here, but sure you can view it on the above mentioned page itself: http://pastebin.com/u9KPkbix

Cheers,
thowi

thowi

Maybe good 2 know: The grids are running pretty well without the filtering options. Implementing this is the next step :)

thowi

Ah, okay, I forgot one essential thing, which brings back the other tabes in other tabs:
[code]var asInitVals = new Array();[/code]

But now, the following error message occurs:
[quote]DataTables warning (table id = 'customers'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.[/quote]

Search is working fine - but the TableTools buttons are gone, the setting [code]"sPaginationType": "full_numbers"[/code] is gone and the above mentioned error message needs to be taken care of... but I don't know where to look for.

When I change
[code]var oTable = $('#tabs-1 table.display').dataTable( {[/code]
to
[code]var oTable = $('#tabs-1').dataTable( {[/code]
it looks better, but the search won't work anymore :(

Would really appreciate your thoughts.

Cheers,
thowi

tangerine

The error message is pretty self-explanatory. You can't initialise the table twice.

First code section: var oTable = $('#tabs-1 table.display').dataTable( {

Second code section: $('#tabs-1 table.display').dataTable({

Why can't you merge those two code sections?

thowi

Well.... right. That was easy :)
Thank you very much!

thowi

The next thing would be to include the custom search for all grids in the tabs. To reach that, I will need to set three individual variables:
[code]
var oTable0 = $('#tabs-0 table.display').dataTable({
var oTable1 = $('#tabs-1 table.display').dataTable({
var oTable2 = $('#tabs-2 table.display').dataTable({
[/code]

For filtering, I should need something like:
[code]
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable0.fnFilter( this.value, $("tfoot input").index(this) );
oTable1.fnFilter( this.value, $("tfoot input").index(this) );
oTable2.fnFilter( this.value, $("tfoot input").index(this) );
});
[/code]

For the table footers I also have to individualize the rows. Here an example for the first table:
[code]


...
[/code]

For adapting the user friendlyness part I thought of:
[code]
$("tfoot input").each( function (i) {
asInitVals0[i] = this.value;
asInitVals1[i] = this.value;
asInitVals2[i] = this.value;
});

$("tfoot input").focus( function () {
if ( this.className == "search_init0" ){ this.className = ""; this.value = "";}
if ( this.className == "search_init1" ){ this.className = ""; this.value = "";}
if ( this.className == "search_init2" ){ this.className = ""; this.value = "";}
});

$("tfoot input").blur( function (i) {
if ( this.value == "" ){ this.className = "search_init0"; this.value = asInitVals0[$("tfoot input").index(this)];}
if ( this.value == "" ){ this.className = "search_init1"; this.value = asInitVals1[$("tfoot input").index(this)];}
if ( this.value == "" ){ this.className = "search_init2"; this.value = asInitVals2[$("tfoot input").index(this)];}
});
[/code]

Now, the first Tab (#tabs-0) is working fine, but the rest is not.

Maybe the part
[code]
$("tfoot input")
[/code]
Is a problem because this occurs in every one of the three individual tables.

So, how can I get these column searches bound to their specified table? Which part did I miss?

Cheers,
thowi

thowi

So I think the problem here is to isolate the three instances from each other. So actually I'm not able to distinguish the "tfoot input" events which occur the same on every single table. That's why it's not working.
With [code]oTable0.fnFilter( this.value, $("tfoot input").index(this) );[/code] I'm able to filter in the specified tables for "tfoot input" - this should not cause any problems if I understood that correctly.

But this here should be a problem:
[code]
$("tfoot input").each( function (i) {
asInitVals0[i] = this.value;
asInitVals1[i] = this.value;
asInitVals2[i] = this.value;
});
[/code]

Actually I don't know how to fix that.
It would help me a lot to hear from you :)

Cheers,
thowi

allan

Hi thowi,

As a simplification, I'd suggest forgetting all the asInitVals stuff in the 1.9 DataTables filtering example, and instead use the HTML5 placeholder attribute: http://davidwalsh.name/html5-placeholder . This reduced the complexity by a huge amount!

This is the approach that I'm taking with the DataTables 1.10 example as well.

Regards,
Allan