Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81687

Multiple Tables in the same page

$
0
0
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!

Viewing all articles
Browse latest Browse all 81687

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>