column filtering move to .dataTables_filter does not work well with multiple tables

tanvien

I want to move the select options for each columns to align with show | | entries ............... Seach All Columns ------

like: show | | entries "select column1" "select column2" Seach All Columns .........

based on the sample below

http://www.datatables.net/examples/api/multi_filter_select.html

I have been stuck into this for four days now, hope someone can point out where did I get it wrong

when there is only one table it works ok but when there are a multiple tables the selection is messed up


the part of the main coding are below


if (containerID == "ILGridContainer") {

(function ($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only wany unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not wany to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);

//var sValue = aData[iColumn];
var sValue = $.trim(aData[iColumn]);
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;

}
}
(jQuery));

var oTable = "";
$(document).ready(function () { /* Initialise the DataTable */
oTable = $(".ILGridContainer").find("table").dataTable({
"oLanguage": { "sSearch": "Filter :" },
"sPaginationType": "full_numbers",
"aLengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
"bSort": true,
"bRetrieve": true,
"iDisplayLength": 5,
"bStateSave": false,
// "fnStateSaveCallback": function ( oSettings, sValue ) {
// sValue += ',"filter ": "oTable.fnFilter"';
// return sValue;
// },
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0]}]
});




try {
$(".ILGridContainer").find('.dataTables_filter').each(function (index ) {

// if I do not do this, it will add a lot of select in one table!
if($(this).text().indexOf("Office Location") >= 0)
{}
else
{
var htmlToAdd = OfficeCreateSelect(oTable.fnGetColumnData(5), "OfficeListSelect" + index);
$(this).append("   Office Location: " + htmlToAdd + "