Load page while scrolling

Question

singaiah39 0 Newbie Poster

13 Years Ago

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.

javascript

2 Contributors
3 Replies
135 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

It's hard to help without seeing your existing code.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

singaiah39 0 Newbie Poster · Answer 1 · 2011-01-30T22:45:23+00:00

Hi,
Please consider below example...

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2011-01-31T00:48:13+00:00

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