<div class="content" id="7">some stuff</div>
<div class="content" id="8">another row of stuff</div>
<div class="content" id="9">another row of stuff</div>
然后您需要一个函数来显示“正在加载”图标，该图标也将获取下一批数据。使用网格中最后一个元素的 id 在服务器端运行查询，该查询将获取接下来的 20 行（或您想要的任意数量）数据行。
function lastRow()
{
$('div#lastRowLoader').html('<img src="spinner.gif"/>');
$.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'),
function(data){
if (data != '') {
$('.content:last').after(data);
}
$('div#lastRowLoader').empty();
});
};
然后最后一个函数来检测用户是否已向下滚动到页面末尾。
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastRow();
}
});
显然，您需要一些代码来获取您发布的返回内容，以通过 DOM 将数据加载到您的页面中。我编写这段代码是为了从概念上向您展示需要发生什么。您的标记将有所不同，并且您的网格可以是从 Sencha Ext JS 到手动滚动的任何内容。
希望这足以让你开始运转。
I've got one implementation you might like. There are several ways to do this with several more variations.
First, you need to store the keys of the data that you displaying in the grid somewhere. This assumes that you've got a key that is sequential in nature. An auto incrementing integer would work.
The markup in your grid might look something like this:
<div class="content" id="7">some stuff</div>
<div class="content" id="8">another row of stuff</div>
<div class="content" id="9">another row of stuff</div>
Then you need a function to show a "loading" icon that will also grab the next batch of data. Use the id from the last element in the grid to run a query on the server side that would grab the next 20 (or however many you want) rows of data.
function lastRow()
{
$('div#lastRowLoader').html('<img src="spinner.gif"/>');
$.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'),
function(data){
if (data != '') {
$('.content:last').after(data);
}
$('div#lastRowLoader').empty();
});
};
Then one last function to detect the user has scrolled down to the end of the page.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastRow();
}
});
Clearly, you need some code to take what you're post returns to load the data into your page through the DOM. I've written this code to show you conceptually what needs to happen. Your markup will be different and your grid could be anything from Sencha Ext JS to something hand rolled.
Hopefully this is enough to get the wheels turning for you.
发布评论
评论（1）
我有一个你可能会喜欢的实现。有多种方法可以做到这一点，并有更多的变化。
首先，您需要将在网格中显示的数据的键存储在某处。这假设您有一个本质上是连续的密钥。自动递增整数就可以了。
网格中的标记可能看起来像这样：
然后您需要一个函数来显示“正在加载”图标，该图标也将获取下一批数据。使用网格中最后一个元素的 id 在服务器端运行查询，该查询将获取接下来的 20 行（或您想要的任意数量）数据行。
然后最后一个函数来检测用户是否已向下滚动到页面末尾。
显然，您需要一些代码来获取您发布的返回内容，以通过 DOM 将数据加载到您的页面中。我编写这段代码是为了从概念上向您展示需要发生什么。您的标记将有所不同，并且您的网格可以是从 Sencha Ext JS 到手动滚动的任何内容。
希望这足以让你开始运转。
I've got one implementation you might like. There are several ways to do this with several more variations.
First, you need to store the keys of the data that you displaying in the grid somewhere. This assumes that you've got a key that is sequential in nature. An auto incrementing integer would work.
The markup in your grid might look something like this:
Then you need a function to show a "loading" icon that will also grab the next batch of data. Use the id from the last element in the grid to run a query on the server side that would grab the next 20 (or however many you want) rows of data.
Then one last function to detect the user has scrolled down to the end of the page.
Clearly, you need some code to take what you're post returns to load the data into your page through the DOM. I've written this code to show you conceptually what needs to happen. Your markup will be different and your grid could be anything from Sencha Ext JS to something hand rolled.
Hopefully this is enough to get the wheels turning for you.