Pagination disappears on page refresh

[saxenageek]

I am using table utils in $(window).load. The pagination certainly disappears on page refresh. Below is my code

$(window).load(function(){
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
    if (readCookie("logged_user") != null && readCookie("logged_user") != ""){
        var db = openDatabase('Library', '1.0', 'Basic Library', 2 * 1024 * 1024);
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE IF NOT EXISTS books (title TEXT, author TEXT, genre TEXT, year    TEXT, owner TEXT, qty INT)');
        });
        localStorage.clear();
        document.getElementById("login").style.display = 'none';
        document.getElementById("userName").innerHTML = "<b>" + readCookie("logged_user_msg") + "</b>"
    + "&nbsp;<a href=\"Javascript:logout();\">logout</a>";

    loadBookData();

    $('#books').tableutils( {
        fixHeader: { width: 740, height: 260 },                  
        paginate: { type: 'numeric', pageSize: 5 }, 
        sort: { type: [ 'alphanumeric', 'alphanumeric' , 'alphanumeric', 'numeric', 'alphanumeric'] },

        columns: [ { label: '' },                      
                   { label: 'Title', name: 'title' },
                   { label: 'Author', name: 'author'},
                   { label: 'Genre', name: 'genre' }, 
                   { label: 'Year', name: 'year' },
                   { label: 'Available', name: 'qty' }
                   ]
    } );
}else if(readCookie("loggedout") == null  && readCookie("loggedout") == ""){
    $('#myModal').modal('show');
}

});

[kolgepratik]

Saurabh, Check if loadBookData() makes an aysnchronous call. Data may not be available when tableutils is initialized. Before initializing tableutils, check if there are records in your 'books' table. If this is not the case, then let me know.

[saxenageek]

hi pratik below is the code for loadBookData, it is just getting data from webdatabase.

function loadBookData(){
var db = openDatabase('Library', '1.0', 'Basic Library', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM books', [], function (tx, results) {
        var len = results.rows.length, i;

        for (i = 0; i < len; i++){
            var row = $("<tr><td width=\"3%\"><input name=\"rec\" type=\"radio\" onchange=\"setLocal(event);\"></td><td width=\"30%\">"
                    +results.rows.item(i).title+"</td><td width=\"25%\">"
                    +results.rows.item(i).author+"</td><td width=\"15%\">"
                    +results.rows.item(i).genre+"</td><td width=\"12%\">"
                    +results.rows.item(i).year+"</td><td width=\"15%\">"
                    +results.rows.item(i).qty+"</td></tr>");
            $("#books").append(row);
        }
    }, null);
    localStorage.clear();
});
   }  

[kolgepratik]

Saurabh,

Did you check if your table has any data before you initialize tableutils. Something like this on the next line after call to loadBookData() :

console.log('no of records in table: ' + $('#books tbody tr').length);

Also please confirm if you are able to atleast see the headers of the table after refresh or you cant see anything done by tableutils at all.

[saxenageek]

Pratik my table has data, it is having 10 rows. it is showing the headers but without pagination. when i click on header to sort column pagination reappears. On 21 Aug 2013 15:19, "kolgepratik" notifications@github.com wrote:

Saurabh,

Did you check if your table has any data before you initialize tableutils. Something like this on the next line after call to loadBookData() :

console.log('no of records in table: ' + $('#books tbody tr').length);

Also please confirm if you are able to atleast see the headers of the table after refresh or you cant see anything done by tableutils at all.

— Reply to this email directly or view it on GitHubhttps://github.com/kolgepratik/tableutils/issues/10#issuecomment-23016227 .

[kolgepratik]

That's weird. I really cant help you out here since I would need to debug the code. I suggest you to open the source code of your HTML page when it is loaded. Check the rows in the table. See their CSS and other relevant properties. Then sort on a column. Then check properties of rows again. May be you would find a clue there as to why the plugin is behaving in such a way.

[saxenageek]

Pratik

At the time of calling tableutils, my table won't have any rows but i can still see the data on the page. I have to find out the way to apply tableutils after the data has been added to the table,

[kolgepratik]

Saurabh,

See the below code:

function loadBookData(){ var db = openDatabase('Library', '1.0', 'Basic Library', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executeSql('SELECT * FROM books', [], function (tx, results) { var len = results.rows.length, i;

        for (i = 0; i < len; i++){
            var row = $("<tr><td width=\"3%\"><input name=\"rec\" type=\"radio\" onchange=\"setLocal(event);\"></td><td width=\"30%\">"
                    +results.rows.item(i).title+"</td><td width=\"25%\">"
                    +results.rows.item(i).author+"</td><td width=\"15%\">"
                    +results.rows.item(i).genre+"</td><td width=\"12%\">"
                    +results.rows.item(i).year+"</td><td width=\"15%\">"
                    +results.rows.item(i).qty+"</td></tr>");
            $("#books").append(row);
        }

        // Add this line to the code. Keep other things unchanged. I think this might solve your problem. 
        $('#books').trigger('tableUpdated');

    }, null);
    localStorage.clear();
});

}

I have just added 1 line of code after the for loop. See if it helps. :)

[saxenageek]

hi pratik

i certainly have a table in which I am just doing a few things like

1. add a new record
2. add multiple records from file
3. edit a record
4. delete a record

So, on every operation I just need to refresh the table state. I don't want to reload the page every now and then, so, I am experimenting with AJAX. If you can help me in that, you are most welcome.