Multiple DataTables and Footer
Multiple DataTables and Footer
Hello,
I am having a problem accessing the calculated footer values of one datatable from the fnDrawCallback function of another table. Let me explain.
I am using multiple datatables on the same page with different Ajax sources. I have a table1 which uses datatable and also a table2 which uses datatables. The Ajax sources are different. I have initialized table1 first and then table2. I calculate and populate the footer values for each of these tables using the fnDrawCallback event. However, in table2, I not only need the values of table2, but also the footer value of table1. This is where I run into problems. Sometimes the table 1 footer value is available, at other times, it just turns out to be an empty string. The issue happens intermittently and I suspect there is some timing issue involved here. I have represented the problem by mentioning the skeletal structure of the code below.
Please advice.
[code]
var oTable1 = $('#auto1').dataTable({
....
"fnDrawCallback": function (oSettings) {
// calculate some value and populate footer for this table
}
});
...
var oTable2 = $('#auto2').dataTable({
....
"fnDrawCallback": function (oSettings) {
// calculate some value and populate footer for this table
// use the calculated footer value of oTable1 to make further calculations
// Sometimes the footer value of oTable1 is correct, sometimes it just turns out to be an empty string
// Is there a way I can ensure that oTable2 always executes AFTER oTable1 has completed executing
}
});
[/code]
I am having a problem accessing the calculated footer values of one datatable from the fnDrawCallback function of another table. Let me explain.
I am using multiple datatables on the same page with different Ajax sources. I have a table1 which uses datatable and also a table2 which uses datatables. The Ajax sources are different. I have initialized table1 first and then table2. I calculate and populate the footer values for each of these tables using the fnDrawCallback event. However, in table2, I not only need the values of table2, but also the footer value of table1. This is where I run into problems. Sometimes the table 1 footer value is available, at other times, it just turns out to be an empty string. The issue happens intermittently and I suspect there is some timing issue involved here. I have represented the problem by mentioning the skeletal structure of the code below.
Please advice.
[code]
var oTable1 = $('#auto1').dataTable({
....
"fnDrawCallback": function (oSettings) {
// calculate some value and populate footer for this table
}
});
...
var oTable2 = $('#auto2').dataTable({
....
"fnDrawCallback": function (oSettings) {
// calculate some value and populate footer for this table
// use the calculated footer value of oTable1 to make further calculations
// Sometimes the footer value of oTable1 is correct, sometimes it just turns out to be an empty string
// Is there a way I can ensure that oTable2 always executes AFTER oTable1 has completed executing
}
});
[/code]
This discussion has been closed.
Replies
Since you are using Ajax source you need to remember that the requests are asynchronous. Thus 2 might finish before 1, it might not. To ensure order of execution you can use the fnInitComplete callback - that will execute only when the table has loaded the data from the Ajax source. So the easy fix is to put table 2 initialisation into fnInitComplete for table 1. A (slightly) harder fix, but more complete, would be to have table 2 recalculate the footer elements when table 1 completes.
Allan
Thanks for your comments. I put table 2 inside the fnInitComplete of table 1 and that solved the problem.
I ran into one more problem. I have a jeditable field on the top of my page. If the user changes the value of this field, table1 and table2 (along with 3 other tables) needs to be refreshed in the same order as it was in page load. While this is happening in the initial page load, I am not able to achieve this in the callback of jeditable.
I looked into the documentation and the forum and I gather that fnReloadAjax is what I am supposed to use. The callback function that I pass to fnReloadAjax is the same function that I is used for the fnInitComplete of otable1. However, all the tables dont get refreshed. only table1 gets reloaded.
[code]
var oTable1 = $('#auto1').dataTable({
....
"fnInitComplete": oTable1CallBack
});
[/code]
[code]
//The call back function
function oTable1CallBack(oSettings, json) {
//For Inventory Table
oTable2 = $('#inventory').dataTable({
"bDestroy": true,
"bRetrieve": true,
"bJQueryUI": true,
"bProcessing": true,
"bSort": false,
"bPaginate": false,
"iDisplayLength": 100,
"sDom": 'tr',
"bServerSide": true,
"bAutoWidth": false,
"bFilter": false,
"sAjaxSource:
// oTable2 has fnInitComplete that contains the initialization of oTable3. OTable3 has for oTable4 and so on
// oTable1CallBack works absolutely fine in the initial page load. But when it gets called by fnReloadAjax (as shown below), oTable2 and oTable3 etc. never get reloaded.
}
[/code]
[code]
//The Jeditable function
$('#MainContent_lblGSTRate').editable(
'/WebServices/MAT2125.asmx/SaveGSTRate',
{
submit: 'OK',
width: '80px',
onsubmit: function (settings, td) {
var bValid = true;
var input = $(td).find('input');
bValid = bValid & jEditableCheckRegexp(input, /^[-+]?\d{1,3}(\.\d{1,2})?$/);
if (bValid) {
return true;
}
else {
return false;
}
},
submitdata: function (value, settings) {
return { parentId: parentId, year: year };
},
"callback": function (sValue, y) {
oTable1.fnReloadAjax(null, oTable1CallBack, null);
},
indicator: "Saving...",
tooltip: 'click to edit',
placeholder: "0"
});
[/code]