I'm having problems using Data Table's (v1.10.6) save feature.
Using the below parameters, it seems that saving and restoring state functionality works correctly, but after a random amount of time, the state gets overwritten with the default table layout. This problem seems to only occur after making table changes at night, then checking the site in the morning to find everything reset. Data Tables usually persists the table layout throughout the day, but there are fringe occurrences where table layout gets reset randomly during the day. Data Tables is the only location local storage is being set.
Ideal behavior is that the state of Data Tables, reordering or adding columns, stays indefinitely persistent as a user changes the table.
stateSave: true,
stateDuration : 0,
stateSaveCallback: function(settings, data) {
localStorage.setItem('DataTables_Asset_List', JSON.stringify(data));
},
stateLoadCallback: function(settings) {
return JSON.parse(localStorage.getItem('DataTables_Asset_List'));
}
Plugins used:
Data Tables Bootstrap
ColReorder
Any assistance is appreciated, thanks!
What you're looking for is the stateDuration option:
https://datatables.net/reference/option/stateDuration
If your tables are saving to localStorage, this option defines how long the saved state in localStorage is used, before returning back to the default state. The default value of stateDuration is 7200 (or 2 hours).
For example, if a user goes 2 hours without visiting the page/reloading the table, which simply "refreshes" the countdown timer if you will, then the table will load its default settings. Regardless of what is currently in the localStorage. This explains why changes seem to not persist overnight.
In summary, increase the stateDuration option to increase the persistence duration of your tables.
I hope that helps.
Related
I have a database that is updated with new rows almost every few seconds.
I have a table on my website that I would like to be automatically updated with the new rows added to the top without the user having to refresh the page.
I was testing the below:
$(document).ready(function(){
loadstation();
});
function loadstation(){
$("#data_download").load("/include/data_download.php");
setTimeout(loadstation, 1000);
}
This works however I am unable to select anything in the table as when the function refreshes the request is unselects everything. I am also met with another issue of scale and after some time on the page I receive an error on the browser about memory issues "SBOX_FATAL_MEMORY_EXCEEDED".
What would be the best approach to having this be scalable and with no memory issues.
Thanks in advance.
You could add a timestamp to your rows and only pull (and load) the extra rows happened since the last update.
Let's say you loaded the page at 00:01, then you pull and append (instead of load) the rows added since 00:01 and update the timestamp.
This would solve the issue deleting the selection, because it would add and load only the extra rows and not reload the full table on each update.
The best approach would be use AJAX. The server should only send data of the updated fields (JSON format preferable) and javascript should simply replace textContent of the needed field(s).
I have a table which reloads its data at a period of time and it should keep the state after each reload. I've tried using "stateSave": true but without success.
Is there a way to keep the state (search, paging) after each data reload? Is clear the one that makes the table loose its state?
Here is my code - JsFiddle
I don't have much experience with DataTables so, please, be gentle.
State is being saved, but some of it is being overwritten by the code in your reload loop.
State which is being saved and preserved:
Sorting (clicking on column headings)
Filtering (using the gloabl filter input control).
Records per page ("show x entries")
Steps: (1) I open my copy of your web page, and change these items. (2) I close the web page. (3) I re-open the page. The above items are preserved.
State which is being overwritten by your code:
Paging (moving from page 1 to page 2)
If I do this, then when I close and return to the page, my pagination selection is no longer on page 2.
But the pagination selection was actually saved.
It's just that your code immediately overwrites the saved value, when the page is re-opened, before the first table draw:
else table.clear().rows.add(data).draw();
So, you never get to see the previously saved pagination applied by the user.
When the table is cleared and the data is reloaded, that is basically applying a new pagination, overwriting your saved one.
State saving works by saving data to your browser's local storage. It is there where the page change (page 1 to page 2) is stored.
You can see this for yourself by opening your browser tools (F12), and locating the Local Storage entry for your table.
When you move to page 2, you see this:
This means: start with the 10th record and show 10 records per page
(note that the 10th record is actually the 11th since the index is zero-based).
If you watch this start value in your browser, you will see it being reset back to zero when your refresh code runs.
I am using the DataTables jQuery plugin with server side pagination to create a table with child rows where the user can change the data, the problem I have is when I move to another page without saving changes in the modified forms; the DataTables removes the rows and its child rows from the DOM, so I am not able to get later the updated rows to save the changes, also if I move back to the first page where the user modified the data, the child rows are re-created (as part of the createdRow event where I am creating the child rows) so the changes entered by the user are lost.
Is there any way to deal with this problem?
I don't have enough experience in working with DataTable, but I guess this plugin has something like "data is loaded" event. Before the page is reloaded, you can save your draft data in separate array/object (like draftData) and after data is loaded, you can merge information before page rendering.
I ended up creating my own logic since this is an expected behavior of the DataTables plugin.
When using server side with DataTables, the plugin doesn't have a way to identify or "remember" what rows are being modified, what rows are selected, etc. Because of each pagination request rebuild the table and re-create the rows.
I found somewhere that a valid approach was using a global variable to store all the changes (selected rows, updated data, etc) I am also using the createdRow event to restore the changes made by the user after creating each row.
I have 10 page with pagination.I am listing 10 data per page.While clicking on pagination button it will go to database and fetching records accordingly.Each data having one button(checked/notchecked),I want to retain the state of the button after page refresh.
Consider the following scenario:
I am choosing first 2 button from a first page(now state of that two changed to checked).It should be retain even after page refresh.What is the best optimal solution without storing the state in database. Is it possible to do in javascript/jquery with jsons?
Suggest some optimal solution.
You can serialize array holding that information (what is checked and what's not) and store it in cookie or PHP session.
I have developed an ASP.Net application which users use to enter their time sheets. The application is using a grid to display the days as columns and the entries as rows. Whenever the user enters values to the cells, signifying the hours spent for a particular project on a particular day, I have a JavaScript function which updates the column totals for the day. When the user focuses another row, the row total is also updated.
A strange behavior is exhibited when the number of rows of the grid exceeds 50 or so rows: when a new row is added, after the user populates the first cell, it takes up to 40 seconds for the total of the column to be updated, during which time the browser is waiting for the operation to finish. After control is returned to the browser, populating subsequent cells in the same row update the totals instantaneously. When a new row is added, the same behavior is exhibited.
Could someone please point me to where I should start troubleshooting this issue? Is this browser related (we are using IE 8), or should I look into the JavaScript code? I tried running this application using. Running the application using FF somewhow does not work, so I cannot test it that way.
Any ideas?
The problem (for anyone who's interested) was with the getRow() method of Ig2010.3. I re-wired the logic of the page and it's now reading the content of the cell otherwise. It's ok now.