multiple tables, same page

tchristi326

I have 2 tables on the same page coming from the same source. The tables are displaying fine. The problem I am having is with the state.save. When the tables are first loaded both tables are set to a length of 5, If I change the first tables length to 10 and then navigate away from the page, when I return to the page both tables are set to 10. The last change made is being applied to both tables. How can I have have those changes of length and page number only apply to the table that is changed?

stateSave: true,
stateSaveCallback: function (settings, data) {
myCookies.setCookie("table-cookie", data, settings);
},
stateLoadCallback: function (settings, callback) {
callback(myCookies.getCookie("table-cookie"));
$('#' + self.resultsTableId').DataTable().responsive.recalc();
},

kthorngren

myCookies.setCookie("table-cookie", data, settings);

Is this saving both tables to the same cookie?

You can see with this example Datatables saves the states independently.
http://live.datatables.net/geduqepo/1/edit

Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tchristi326

yes, it is saving both tables to the same cookie. The tables have different search criteria and return the correct information. It is the length and paging that seem to be linked and not saving independently. It seems that whatever is last changed and triggers the save, is what is returned for both tables

I will try to set up a test case ..
but these are the config settings ...

self.dtTable = function() {
return {
language: {
'emptyTable': 'There are no forms in progress.'
},
searching: true,
ordering: true,
paging: true,
info: true,
responsive: true,
processing: true,
serverSide: true,
stateSave: true,
autoWidth: false,
stateSaveCallback: function (settings, data) {
myCookies.setCookie("table-cookie", data, settings);
},
stateLoadCallback: function (settings, callback) {
callback(myCookies.getCookie("table-cookie"));
$('#' + self.resultsTableId').DataTable().responsive.recalc();
},
ajax: function(data, callback, settings) {
table1(self.searchCriteria, data).success(function(result) {
ko.mapping.fromJS(result.data, {
'': {
create: function(options) {
return new tabley(options.data);
}
}
}, self.searchResults);
result.data = self.searchResults();
callback(result);
});
},
lengthMenu: [[5, 10, 20, 50, 100], [5, 10, 20, 50, 100]],
columns:
..................

kthorngren

yes, it is saving both tables to the same cookie.

I would start debugging here to make sure the data saved in the cookie is independent for each table. You can see with letting Datatables handle saving the data each table is independent. You might need to add something to your setCookie and getCookie functions to save the settings per table id.

Kevin

tchristi326

Thanks, I ill take a look at those functions