Solved

dynamic html generation using client side javascript

Posted on 2004-11-04
4
683 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
  • 2
4 Comments
 
LVL 1

Assisted Solution

by:gagaliya
gagaliya earned 150 total points
Comment Utility
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
Comment Utility
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 150 total points
Comment Utility
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
Comment Utility
Thanks for your help guys!!

Dave
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now