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:
<script language="javascript" type="text/javascript">
$.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" }
]
});
});
</script>
<script language="javascript" type="text/javascript">
$.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" }
]
});
});
</script>
Thanks!
.
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:
<script language="javascript" type="text/javascript">
$.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" }
]
});
});
</script>
<script language="javascript" type="text/javascript">
$.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" }
]
});
});
</script>
Thanks!