my rows disappear when i use localStorage to store pageLength for later use.

kmarberry

I am using localStorage to store the preference of the client on how many rows they want to display in the browser. it works great except for ALL (-1). Then when I go back to the page it flashes the rows then hides them and says "Showing 1 to 0-1 of 111 entries" it also says "Showing 1 to 0, 100 of 111 entries" if i go to 100 and refresh.

my Javascript

$(document).ready(function () {
    var mySelected = localStorage.getItem("displayLength");
    var displayLength;

    if (localStorage.getItem("displayLength") == 30 || localStorage.getItem("displayLength") == null) {
        displayLength = 30;
        localStorage.setItem("displayLength", displayLength)
    }
    else if (localStorage.getItem("displayLength") == "All") {
        displayLength = -1;
        localStorage.setItem("displayLength", displayLength)
    }
    else {
        displayLength = localStorage.getItem("displayLength")
    }

    var table = $('#forms').dataTable({
        "dom": '<"row"<"col-md-4" l><"col-md-4 col-md-offset-4" f>< rt ><"col-md-6 col-md-offset-5"ip>>',
        "sPaginationType": "full_numbers",
        "lengthMenu": [[10, 20, 30, 50, 100, -1], [10, 20, 30, 50, 100, "All"]],
        "pageLength": displayLength,
        "oLanguage": {
            "sSearch": "Filter:"
        },
    });

    $("select").change(function () {
        localStorage.setItem("displayLength", $("select").val());
        table._iDisplayLength = localStorage.getItem("displayLength");
    });
});

How do I fix this issue?

kmarberry

I think I got a working example.
http://live.datatables.net/pidakuyu/1/edit

kthorngren

It looks like displayLength is a string after it retrieves from localStorage, ie, this: displayLength = localStorage.getItem("displayLength");

Adding this before your Datatables init should fix the problem:
displayLength = parseInt(displayLength);

Kevin

kmarberry

That worked thank you so much!