Multiple Tables in the same page

Dgandalf

I am having problem using more than one table at the same page, taking data from the server, with the jquery.dataTables.columnFilter.js plugin (Allow to filter by each column)
.
The second table filters also filter the first table and the first filter doesn't filter at all. I think the 2nd initiallization might override the 1st one.

Here is the script:



$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback) {
if (typeof sNewSource != 'undefined') {
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;

oSettings.fnServerData(oSettings.sAjaxSource, null, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable(oSettings);

/* Got the data - add it to the table */
for (var i = 0; i < json.aaData.length; i++) {
that.oApi._fnAddData(oSettings, json.aaData[i]);
}

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw(that);
that.oApi._fnProcessingDisplay(oSettings, false);

/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function') {
fnCallback(oSettings);
}
});
};

var oTable;
$(document).ready(function () {

$.datepicker.regional[""].dateFormat = 'dd/mm/yy';
$.datepicker.setDefaults($.datepicker.regional['']);

var oTable = $('#table1').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home/Table1DataProviderAction",
"bJQueryUI": true
});

oTable.columnFilter({
aoColumns: [{ type: "number-range" },
{ type: "text" },
{ type: "text" },
{ type: "date-range" },
{ type: "number-range" }
]
});
});




$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, sNewSource, fnCallback) {
if (typeof sNewSource != 'undefined') {
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;

oSettings.fnServerData(oSettings.sAjaxSource, null, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable(oSettings);

/* Got the data - add it to the table */
for (var i = 0; i < json.aaData.length; i++) {
that.oApi._fnAddData(oSettings, json.aaData[i]);
}

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw(that);
that.oApi._fnProcessingDisplay(oSettings, false);

/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function') {
fnCallback(oSettings);
}
});
};

var oSecondTable;
$(document).ready(function () {

$.datepicker.regional[""].dateFormat = 'dd/mm/yy';
$.datepicker.setDefaults($.datepicker.regional['']);

var oSecondTable= $('#table2').dataTable({
"bServerSide": true,
"sAjaxSource": "/Home/Table2DataProviderAction",
"bJQueryUI": true
});

oSecondTable.columnFilter({
aoColumns: [{ type: "number-range" },
{ type: "text" },
{ type: "text" },
{ type: "date-range" },
{ type: "number-range" }
]
});
});




Thanks!

allan

I'm afraid I don't know much about the column filter plug-in as it is a third party plug-in.. It might be worth filing an issue against that plug-in on its Google code page.

Allan

knapek

I was dealing with the same issue and I found simple solution - but it changes jquery.dataTables.columnFilter.js little bit. Problem is in here:

[code]
$.fn.columnFilter = function (options) {

oTable = this;
[/code]

Value of global variable oTable will be the last table you defined (in example above it is "oSecondTable"). And in function:

[code]
function fnCreateInput(regex, smart, bIsNumber) {
[/code]

there is this code:

[code]
if (bIsNumber && !oTable.fnSettings().oFeatures.bServerSide) {
input.keyup(function () {
/* Filter on the column all numbers that starts with the entered value */
oTable.fnFilter('^' + this.value, index, true, false);
});
} else {
input.keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, index, regex, smart);
});
}
[/code]

input.keyup is being called when user is typing to column filter input. Problem is variable oTable, which has value of last defined table (oSecondTable). Simple solution is pass the oTable as an argument, like this:

[code]
function fnCreateInput(regex, smart, bIsNumber, oTable) {
[/code]

And you must add oTable argument like above for another function, which generated another type of column filtering (date, select and so on) like this:

[code]
function fnCreateInput(regex, smart, bIsNumber, oTable)

function fnCreateRangeInput(oTable)

function fnCreateDateRangeInput(oTable)

function fnCreateSelect(aData, oTable)

[/code]

And finaly you have to pass the oTable argument in place, where those functions are called. This is in this function:

[code]
$.fn.columnFilter = function (options) {
[/code]

You can find switch, and when you add the oTable argument like bellow, everething will be all right.

[code]
switch (aoColumn.type) {
case "number":
fnCreateInput(true, false, true, oTable);
break;
case "text":
bRegex = (aoColumn.bRegex == null ? false : aoColumn.bRegex);
bSmart = (aoColumn.bSmart == null ? false : aoColumn.bSmart);
fnCreateInput(bRegex, bSmart, false, oTable);
break;
case "select":
fnCreateSelect(aoColumn.values, oTable);
break;
case "number-range":
fnCreateRangeInput(oTable);
break;
case "date-range":
fnCreateDateRangeInput(oTable);

break;
default:
break;
[/code]

So long story short, you must only add and pass oTable argument to fnCreate... functions. When plugin calls fnCreate... functions, oTable has a right value.