CODEWITHSUNDEEP
javascriptphpjquerymysql
Anthony Cordio
Anthony Cordio

Reputation: 57

JQuery Get More Table Rows on Scroll

I have a table that lists off a customer's previous purchases. The code below works great when the customer only has purchased 200-300 items from us. However, it becomes very troublesome when we have dealers that purchase upwards of 5,000 items a week from us. Is there a way to load more rows into the bottom of the table when needed? Fetching and loading 10,000 records into a table is very very slow. An ideal solution would be to initially fetch 30 rows and load them into the table, and when the 4th to last row is visible on the screen, fetch another 30 rows. Any thoughts? Here's my current code to load all of the results:

JQuery:

   var data = JSON.parse(call.responseText);
            if(data[0] === 'none') { $('#purchaseHistory').html('<center><b>There is no purchase history to show.</b></center>'); return; }
            var purchases = data.length;
            $('#purchaseHistory').empty();
            for(i = 0; i < purchases; i++) {
                $('#purchaseHistory').append('<tr ondblclick="popup(\'order.php?order='+data[i]['ORDER']+'&cust='+CUSTOMER_ID+'\', \'Order #'+ data[i]['ORDER'] +'\', \'1150\', \'845\');"><td style="width: 60px;">'+ data[i]['ORDERNO'] +'</td><td style="width: 100px;">'+data[i]['ORDER_DATE'] +'</td><td style="width: 100px;">'+data[i]['PRODCODE']+'</td><td style="width: 170px;">'+ data[i]['ITEM'] +'</td><td style="width: 25px;">'+ data[i]['QUANTITY'] +'</td><td style="width: 120px;">'+ data[i]['STATUS'] +'</td><td style="width: 75px;">'+ data[i]['SHIP_DATE'] +'</td><td style="width: 60px;">---</td><td style="width: 70px;">'+ data[i]['AMOUNT'] +'</td><td style="width:85px;">---</td></tr>');
            }

Any suggestions are greatly appreciated.

Upvotes: 1

Views: 1233

Answers (1)

Jose Rojas
Jose Rojas

Reputation: 3530

Adding listener to scroll to your window:

$(window).scroll(function() {});

this helps you out to know when the user is near to the botton of the page.

Your backend should be able to paginate, retrieving the data by chunks So you can append the result to the table when the user reachs the bottom of the page, making an AJAX request.

here an example how you would achieve.

https://jsfiddle.net/eojdzc3o/

Upvotes: 3

Related Questions