Implementing Tabs Using Database

hrfrank

I have managed to use the info provided in the forums and examples to get records from my database into my datatable on my webpage. I now want to implement tabs. I have a Products table in my database with 5 columns (item, dimensions, price, description, category). The Category field has 2 values ("Available" or "Sold"). I need to hide the Category column from display and then have 2 tabs - 1 for Available and 1 for Sold products.

Please provide a sample code snippet or article for me to follow.

BTW - Awesome toolset!

hrfrank

I was able to implement tabs from the database but am now stumped trying to filter the data on the two tabs. I can filter the first tab, but I cannot fugre out how to control the second tab data. I apologize in advance for the horrific coding. I am trying to piece together a bunch of examples. Below is my current code:

[code]

var oTable1;
var oTable2;
var selected;
$(document).ready(function() {
$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );
$("#tabs").bind( "tabsselect", function(event, ui) {
selected = ui.index;
});

oTable1 = $('table.display').dataTable( {
"bServerSide": true,
"sAjaxSource": "../server_processing.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"aoColumns": [
/* Item */ null,
/* Dimensions */ null,
/* Price */ null,
/* Description */ null,
/* Category */ { "bVisible": false }
]
} );
switch (selected) {
case 0:
oTable1.fnFilter( 'Available',4 );
break;
case 1:
oTable1.fnFilter( 'Sold',4 );
break;
default:
oTable1.fnFilter( 'Available',4 );
break;
}
} );

/*** oTable1.fnFilter( 'Available',4 ); ***/
/*** oTable2.fnFilter( 'Sold',4 ); ***/





Data Tables jQuery example







Available
Sold





Item #
Dimensions
Price
Description




Loading data from server








Item #
Dimensions
Price
Description




Loading data from server









[/code]