0

I'm iterating my local database and adding each item of a table to a list. As I have over 3,000 rows in that table, it takes like 10 seconds to append all those items. I tried taking out jQuery Mobile, but it still takes a long time.

For example, I have my customers list, I wait 10 seconds to get the 3,000 of them, then, I touch one of them to see the details, and when I go back, it starts appending the 3,000 all over again and have to wait that time again and again.

Is there a way to do that only the first time? I tried saving the html to a session variable but also takes a long time.

This is how I have it:

function getProducts(){
        var query ="SELECT name FROM person";

        db.transaction(function (tx){
            tx.executeSql(query, [], function (tx, results){
                var len = results.rows.length;


                    for (var i = 0; i < len; i++){
                        $('#customers').append("<li>" + results.rows.item(i).name + 
                        "</li>");
                    }

            }, callBack);
        }, callBack);
    }   
3
  • I'd start with not loading all of them... Pagination is your friend.
    – ZenMaster
    Feb 25, 2014 at 21:03
  • Either paginate or cache the page as HTML and update at set intervals.
    – Ennui
    Feb 25, 2014 at 21:05
  • I'd recommend looping and through and concatenating each li onto the end of a string. Then once the string is built, you only have to do a single .append(). That doesn't necessarily solve your problem of only getting the data once but definitely takes a load off doing 3000 .append()'s
    – Drew B.
    Feb 25, 2014 at 21:17

1 Answer 1

0

I would recommend doing all the appending within document.createDocumentFragment and then append that to the live DOM only after you've completed the loop that builds each LI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.