localStorage for state saving and updates in 1.9 - Page 2

localStorage for state saving and updates in 1.9

2»

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    > For some reason cookies didn't quite cut it.

    They have a 4KiB limit - any more and you get horrible server errors, so DataTables has to drop content that would take the cookies over that limit. DataTables 1.10 changes from cookie storage to localStorage for state saving, as cookie just have too many issues and are now totally out-dated.

    > However, I ran into a little problem with the new plugin LengthLinks.

    Haha! That's a real face-plam moment hat. The problem is that a display length of -1 means "All" to DataTables. But as you can see, I predefine lastLength to `-1` in the LengthLinks plug-in, which is way the condition fails. `null` would be a better initialisation value and fix the problem :-).

    Regards,
    Allan
  • alversonalverson Posts: 1Questions: 0Answers: 0
    I am storing the datatables state locally in the client. I would like to "force" a load of a saved state after a certain action is performed, i.e. not a page refresh. How do I for fnLoadState to be called?
  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    Without altering DataTables - you don't. There is no public API for that. You could modify DataTables to do it, or possibly destroy and create the table which would have the same effect as first load.

    Allan
  • John ArcherJohn Archer Posts: 56Questions: 1Answers: 0
    edited June 2013
    Hi Allan,

    I have a question regarding fnStateSave : It seems it is triggered even when the table is created, so the user did not do any changes e.g. to length selection, but the event is fired nevertheless. Is there a specific reason why that event is fired on table initialisation?

    Thanks in advance!

    Regards
  • galfaugalfau Posts: 1Questions: 0Answers: 0
    Hi everyone:

    I just wanted to point something about the StateSave if you have multiple tables in your domain. In case your url is something like this
    [code]
    table.php?country=usa OR table.php?country=uk OR table.php?country=dr,
    [/code]

    This won't work
    [code]
    $(document).ready(function() {
    $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
    localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
    },
    "fnStateLoad": function (oSettings) {
    return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
    }
    } );
    } );
    [/code]

    Since the "window.location.pathname" will be the same for all your tables, if this is the case you can use this

    [code]
    $(document).ready(function() {
    $('#example').dataTable( {
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
    localStorage.setItem( 'DataTables_'+window.location.pathname+window.location.search, JSON.stringify(oData) );
    },
    "fnStateLoad": function (oSettings) {
    return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname+window.location.search) );
    }
    } );
    } );
    [/code]

    Adding window.location.search will save each one of your tables state individually.
  • joshkurzjoshkurz Posts: 1Questions: 0Answers: 0
    +1 Thanks for this. Really a huge time saver.
  • moeriemoerie Posts: 1Questions: 0Answers: 0
    edited September 2013
    I'm having an issue with the state saving, the situation is as follows:

    The user is browsing the table, he goes to page 3. This information is saved in the state.
    When the user returns to the table at a later point in time, the state is loaded and the table tries to open page 3. However, the data has changed and now there is only 1 page of data.

    This results in an empty table with the message "No results found", while there is actually 1 page with data.

    I've tried to change the fnStateLoad function as follows:

    [code]
    "fnStateLoad": function (oSettings) {
    var stringified = localStorage.getItem(storageKey)
    var oData = JSON.parse(stringified || null);
    if (oData && oSettings.fnRecordsTotal() < oData.iStart) {
    oData.iStart = 0;
    oSettings.fnStateSave(oSettings, oData);
    }
    return oData;
    },
    [/code]

    However, this function is called before the data is fetched (Server side processing is enabled) so [code]oSettings.fnRecordsTotal()[/code] always returns 0

    Any suggestions for a fix would be very welcome. :-)
  • marsmars Posts: 29Questions: 2Answers: 0
    hi, allan

    i have a question about the feature of save state in cookies.

    is there any way to clear the datatable state info in cookies? i want to save state info in my page, but i also want to add a button, if i click the button, the datatable will recover to its initial state.

    Does the datatable plugin have any interface or any way to do this?

    thanks a lot for any reply.
  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    Not really actually - but that's most certainly a good idea for a future enhancement. I've added a feature request in the github tracker: https://github.com/DataTables/DataTables/issues/255

    Allan
  • marsmars Posts: 29Questions: 2Answers: 0
    thanks indeed for your reply.

    i also find a problem. i use datatable function interface 'fnDrawCallback' in my webpage. in the 'fnDrawCallback' function, i add CSS class 'row_selected' for the datatable row i click.

    it works fine before i add 'fnStateSave' and 'fnStateLoad' to save state in cookies. but after i add the two functions, i do not work, i mean, when i click the datatable row, the class 'row_selected' has been added, but the background color not change.

    i try to move the codes from 'fnDrawCallback' to 'fnStateSave', and i works fine.

    i not sure if it is a bug. i will add my test case in a moment.
  • alanroalanro Posts: 1Questions: 0Answers: 0
    Hi,
    I have:

    bStateSave: true,
    fnStateSave: function(oSettings, oData) {
    localStorage.setItem('DataTables_' + this.fnSettings().sTableId, JSON.stringify(oData));
    },
    fnStateLoad: function (oSettings) {
    return JSON.parse(localStorage.getItem('DataTables_' + this.fnSettings().sTableId));
    }

    in my datatable initialization, but the functions never get called ( but the save and load callback functions do)
    I do an ajax call to get the data, then manipulate it all on the client.

    If I did get fnStateLoad to trigger, would this function restore the state to the table? I wouldn't need to make any api calls, is that correct.

    Thanks,
    Alan Rosenthal
  • allanallan Posts: 63,489Questions: 1Answers: 10,468 Site admin
    That is correct yes.

    However, if all you want is localStorage, I'd suggest just using DataTables 1.10 ( http://next.datatables.net/download ) as it uses localStorage b default.

    Allan
  • John ArcherJohn Archer Posts: 56Questions: 1Answers: 0

    Hi,

    sorry for "grave digging", but I still would like to know this (see my post from June last year):

    "I have a question regarding fnStateSave : It seems it is triggered even when the table is created, so the user did not do any changes e.g. to length selection, but the event is fired nevertheless. Is there a specific reason why that event is fired on table initialisation?

    Thanks in advance!"

    Regards

  • vkvaradhavkvaradha Posts: 7Questions: 2Answers: 0

    hi, anyone help me to do the auto complete on individual column search with the help of state saving method.

This discussion has been closed.