Solved

dynamic html generation using client side javascript

Posted on 2004-11-04
4
690 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
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 150 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

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

832 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