CODEWITHSUNDEEP
javascriptjqueryhtmljsp
Ishan Rastogi
Ishan Rastogi

Reputation: 830

Add rows to HTML table based on User vertical scrolling

I have a jsp page which contains a list of more than 1000 objects. Due to my requirement I have to show all the 1000 records on the same page without any pagination. I have a javascript method which add the rows into a table on document ready function.

I have 2 problems: 1. Javascript method has the struts tags to fetch labels and list values and then it adds rows into the HTML table. This method takes a lot of time as all the tags are taking lot of time to be resolved from server.

  1. I want to add only 50 records at a time in the table and then when user scrolls vertically down, I want to somehow detect that user has reached at the end so that I can add next 50 rows in the table. As I already have all records with me I will not have to go to database to fetch next rows.

PS: All my 1000 records are from a single table and I can fetch them in no time. Problem is occurring only when rendering for those records happens.

Upvotes: 1

Views: 852

Answers (1)

David O'Regan
David O'Regan

Reputation: 2674

First, only load 50 entiries to the page on the document.ready() call.

Use the .scroll() method from jQuery to trigger the event to append 50 more entires once the user hits the end of your table.

 $('#table').scroll(function() {
   if($('#table').scrollTop() + $('#table').height() == $('table').height()) {
     for(var i = 0; i <= 50; i++) {
       //Append next value in your array to bottom
     }
   }
});

Upvotes: 2

Related Questions