dynamic html generation using client side javascript

I'm writing a page that displayes records pulled from a database. The list of records can potentially be large so we want to only display 10 records on the screen at once, and alow the user to navigate through the records 10 at a time.  I would like to send all the records to the client at once and store them in a javascript array of some sort and have a javascript function write the relevant subset of the records to the screen when the user clicks on a next or previous button.  Any Ideas?
I'm not extreamly well versed in javascript so any help would be greatly appreciated.

Thanks
Dave
LVL 4
NHBFighterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gagaliyaCommented:
dave, you will always get burned at the end trying to manipulate large datasets using javascript, it is bad because:
1)javascript is local system dependent, no way for you to control the performance. if you have like a couple thousand rows and do data massaging on them, your app will slow to a crawl.
2)does not reflect real time data changes. someone updates the db, they will not see the change.
3)more complicated to code with little to no debugging besides using a lot of alert boxes.


i suggest you do paging on the serverside.  simply make a current_index and row_per_page variable. Everytime the user clicks on next or previous add or subtract row_per_page to current_index, do your normal sql to get the entire dataset. then in your jsp/asp etc loop, dont bother print the rows in your html until the current_index is reached, then print row_per_page number of rows.

The downside is a delay to the user when they click next/previous as it is hitting the server, but this is the right way to do paging.  Check the messageboards, or yahoo/google etc, it's all based on this idea.
0
NHBFighterAuthor Commented:
Cool I see your point. I thought it would be quicker to do everything client side but my knowledge of client side processing is fairly limited. I'm going to do this server side like you suggested but I'm going to leave the question open for a while to see if any one else has any additional input.

Thanks
Dave
0
Havin_itCommented:
A possible compromise to gain some speed for the browser would be to load the following pages in the background - for example, in hidden layers which move to the front when a button is clicked.

<script>
var pages = new Array(page1,page2,page3,etc);

function page(move) {
  for(i=0;i<pages.length;i++) {
    if(document.getElementById(pages[i]).style.display!='none') {
      document.getElementById(pages[i]).style.display='none';
      document.getElementById(pages[i+move]).style.display='';
      }
    }
  }
</script>

<div id="container" style="position:absolute; top:0px; left:0px; height:400px; width:600px; margin:0 0 0 0;">
<div id="page1" style="position:relative; top:0px; left:0px; height:100%; width:100%;">
*First record page here*
</div>
<div id="page2" style="position:relative; top:0px; left:0px; height:100%; width:100%; display:none;">
*Second record page, not yet visible*
</div>
*More DIVs for further records*
</div>
<a href="javascript:void(page(1));">Next Page</a>
<a href="javascript:void(page(-1));">Previous Page</a>

This way at least you aren't giving the javaScript interpreter as much work. The page will potentially take a LONG time to load fully though, so I'd balance this with qaqaliya's advice of server-side paging.  If you can create (and delete) pages on the server through script, you could consider creating a series of includes, and - for example - when the user brings up page 2, start loading page 3.

Ultimately, if you want to make browsers share the work like this, I advise testing with a 56k (even 28k?) connection and a machine with feeble amount of RAM, to best calibrate a desirable balance.

Hope that helps..!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NHBFighterAuthor Commented:
Thanks for your help guys!!

Dave
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.