Two tables in a page

Jr0x

Hi,

I am having 2 tables in a single page, do not have issue with displaying the data and page.
However, when I try to do a column search, the issue arise.

Both are using serverside processing and both are pointed to a different page. When I do a search for 2nd table, it actually went to search at the first table.

I have this as my first table.

[code]
$(document).ready(function() {
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php?dt=<?php echo $type; ?>&id=<?php echo $R['id']; ?>",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sClass": "center", "aTargets": [ '_all' ] }
// { "bVisible": false, "aTargets": [ 7 ] }
],
"aaSortingFixed": [[ 6, "asc" ]],
"bStateSave": true,
"fnDrawCallback": function() {
$("#modal a").fancybox({
'hideOnContentClick': true
});
},
// Default sorting order (column [index], type)
// "aaSorting": [[1, 'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
}
});

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

var type = getQuerystring('type');

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

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

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

} );
[/code]

Table layout

[code]




Type
Blk
Floor
Valuation
Asking
Remarks
View Images




Loading data from server




<!--For details column -->










[/code]

Jr0x

My 2nd table

[code]
$(document).ready(function() {
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example2').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing_tran.php?dt=<?php echo $type; ?>&id=<?php echo $R['id']; ?>",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sClass": "center", "aTargets": [ '_all' ] }
],
"bStateSave": true,
// Default sorting order (column [index], type)
// "aaSorting": [[1, 'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
}
});

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );

/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitValss[i] = this.value;
} );

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

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitValss[$("tfoot input").index(this)];
}
} );

} );
[/code]

2nd table layout

[code]




Type
Blk
Floor
Sold




Loading data from server




<!--For details column -->








[/code]

How can I solve it?

28.vivek.s

i think your problem is here...
in first table
[code]var oTable = $('#example').dataTable( {[/code]

and in second table
[code]var oTable = $('#example2').dataTable( {[/code]

you have given the same reference for both table, so i think while filtering data DataTable gets confused and always searching from first table.
Change the second Table reference to [code]var oTable2 = $('#example2').dataTable( {[/code]
I think then it will work.

Regards,
Vivek

Jr0x

Hi Vivek,

Thanks for replying. I've tried your method but it does not work out right.

When I do a search on the 2nd table, 2nd table itself will not be search, instead it search in the first table.
However, if I were to search on the 1st table, the 1st and 2nd table will be searched.

How to make this right?

Jr0x

I have solved it.

Thanks to Allan comment in http://datatables.net/forums/comments.php?DiscussionID=2124&page=1#Item_0

Finally found a way to solve the issue.

Thanks!

28.vivek.s

the same thing i have told you to do....any ways that great to hear that you have got rid of your problem...

Thanks
Vivek

Jr0x

I appreciate your help, but something else was still missing.

eg. [code]$("tfoot input").each( function (i) {
32.
asInitValss[i] = this.value;
33.
} );][/code]

I've to add in the table id to before tfoot input.

Thanks for your help though.

i5513

Hi, I have the same problem
http://www.datatables.net/examples/api/multi_filter.html tell about filter are globals..

But I don't know how easily can I fix my html (I have to remove columnFilter until I get this code work fine):

[code]


Test







$(document).ready( function () {
var a = $('#a').dataTable().columnFilter();
var b = $('#b').dataTable().columnFilter();

} );












Test




Test




aaaaaa




bbbbbbb






Test2




Test2







aaaaaaa



bbbbbbbbb





[/code]