0

Hi,
Could any one tell on how to load page while scrolling?
For e.g. If i want to load 200 records, i will first load 100 records and when the scroll reaches bottom, i will have ajax to get the remaining records. Here, when i get the next set of rows (in responsetext), these rows are seen as text and not as table rows.

Could any body help on how to append the next set of rows to the table?

Thanks,
Singu.

2
Contributors
3
Replies
5
Views
6 Years
Discussion Span
Last Post by Airshow
0

Hi,
Please consider below example...

<html>
<body>"
<div class="ScrollTable" id="ScrollTable" style="height: 200px;overflow-y:auto">
<table border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody style="height: 135px;">
<tr><td>Co 1</td><td>test1</td></tr>
<tr><td>Co 2</td><td>test1</td></tr>
<tr><td>Co 3</td><td>test1</td></tr>
...
....
....
....
.....
1000 rows..
<tr><td>Co 7</td><td>test1</td></tr>
<tr><td>Co 8</td><td>test1</td></tr>
<tr><td>Co 9</td><td>test1</td></tr>
</tbody>
</table>
</div>
</body>
</html>

So, this output is coming in ResponseText of Ajax call.
Then, i tried to get the first 500 rows(based on row id of the table) and displayed in html as below.

docuemnt.getElementById("ScrollTable").innerHTML = ResponseText (of 500 rows)

Then, when the scroll reaches bottom, I tried to append the remaining 500 rows as below.

docuemnt.getElementById("ScrollTable").innerHTML = docuemnt.getElementById("ScrollTable").innerHTML + ResponseText (of next 500 rows)

So, when i use this assignment, the last 500 rows are displayed as text and not in table rows.

Hope this explains my problem.

Thanks,
Singu.

0

Singu,

Here's a rough plan of what you need to do :

First, hard-code the following in your page:

<div class="scrollTableWrapper" style="height: 200px;overflow-y:auto">
	<table id="scrollTable" border="1" cellspacing="2" cellpadding="2">
	<thead>
	<tr>
	<th>Col1</th>
	<th>Col2</th>
	</tr>
	</thead>
	</table>
</div>

This provides a container into which table rows fetched with AJAX will be inserted.

Then ...

Server-side (eg php)

  • Arrange the server-side script (the one that composes the table rows) to accept GET/POST values to determine the start-row and the number of rows to fetch, eg url = 'makeTableRows.php?start=0&num=50;' for the first set of fifty rows.
  • Serve each set of rows from <tbody> to </tbody>, without html, body, div or table tags.

Client-side (javascript)

  • Make sure your AJAX code is inside a function (eg function getTableRows(){...}) so it can be called more than once.
  • Initialise outer valiables to determine the number of rows per set and to keep track of start-row.
    var start = 0;//initial start-row
    var rows_per_set = 50;
    var sets = 2;//The number of sets to fetch
    function getTableRows(){
    	url = 'fetchTableRows.php?start=' + start + '&num=' + rows_per_set;
    	//...
    	//AJAX code goes here
    	//...
    }
  • In the AJAX response handler, insert rows into the table with (I think):
    document.getElementById('scrollTable').innerHTML += responseText;
  • After that line of code (still inside the AJAX response handler), increment start, test whether further rows are required, then make a recursive call to your AJAX function, getTableRows:
    start += rows_per_set;
    if(start < (rows_per_set * sets)){
    	getTableRows();
    }

It will need some development/testing but I think that's essentially what you need.

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.