Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

dynamic html generation using client side javascript

Posted on 2004-11-04
4
Medium Priority
?
695 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:NHBFighter
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 1

Assisted Solution

by:gagaliya
gagaliya earned 600 total points
ID: 12497095
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
 
LVL 4

Author Comment

by:NHBFighter
ID: 12497173
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
 
LVL 10

Accepted Solution

by:
Havin_it earned 600 total points
ID: 12503243
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
 
LVL 4

Author Comment

by:NHBFighter
ID: 12505770
Thanks for your help guys!!

Dave
0

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question