File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes dynamically add rows to the exitsting table Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "dynamically add rows to the exitsting table" Watch "dynamically add rows to the exitsting table" New topic

dynamically add rows to the exitsting table

satheesh subramani

Joined: Jan 03, 2011
Posts: 29

i have the table with 100 records
at the first time the page loading i want to display only 10 records and the more link
if the link is clicked display 10 more records

the records are populated from the oracle database

i don't know how to use the oracle contents in javascript or ajax
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Ajax call makes call to the backend, backend grabs the next set of rows. The rows are returned. The callback function adds the rows to the table.

Charles Philip

Joined: Feb 26, 2011
Posts: 5
If I understand well, you want to display 10 more records each time you click i.e. if you had 20 records and click, 10 records should append to the existing.

So this you can do it through innerHtml (on client side) i.e. you take the codes which are between your <table> tag and add the code replied by the server(responseText).

What I mean is this: Populate a string of the records which you want to add on server side. This string should contain your <tr><td><input type=text id="newCount" value="hereYouMakeTheServerWriteTheDataYouQueried">...

(Also include name and id attribute if you have to use it on client side)
Loop 10 times and make your string variable append each new record.
After looping, you should get a string which contains all your tags for the rows, the textboxes,value in the textboxes etc.

Then you make the server send this string. When the client receives this string(responseText), you use JS to append the server's reply with the existing code.

Make sure that your table is within a div.

If you don't understand AJAX, this won't be easy to explain you all the steps.


There's another alternative to AJAX which is not so nice(because it will require refreshing your page):

Store in a session the number of records.

Make your client request 10 new records:

1) Use the div tag to hide your text box, form. Set your text box value to 10 by default.
2) When you click, a request is sent and the server reads the value in the session.
3)You add this value to 10.Then you return to your page(refresh), read the new session value and Loop this number of times to populate your table.

AJAX is worth learning...
Nikhil Wanpal

Joined: Apr 16, 2010
Posts: 11

satheesh subramani wrote:i don't know how to use the oracle contents in javascript or ajax

I think your question is more about how to make an oracle/sql query from javascript. I doubt that one can actually do that, As far as I know you will need to do something on the server side to call that.. like, JAVA to fetch the records from the database.

Once you get them, you can pass them as is to the client side and wrap into a table-row code and add to the existing table, or as suggested by Charles can also pass the formed string from the server and append to the table.
I agree. Here's the link:
subject: dynamically add rows to the exitsting table
It's not a secret anymore!