如何在数据表中使用ajax一点一点地加载数百万行

时间:2013-10-21 18:57:03

标签: jquery datatables jquery-datatables

看到数据表我无法实现这一目标。现在我可以用不同的方式加载它们,使用ajax(通过使用服务器端)不同的行和不同的顺序,但是现在我无法加载行,例如4或5次加载多个请求ajax(我想使用滚动加载一点一点)。

我怎么能这样做?

1 个答案:

答案 0 :(得分:3)

如何修改你的ajax以加载x行,从第一行开始,然后当最后一个条目的顶部偏移进入视图时,你可以在同一个文件上触发另一个ajax事件,但是使用x知道是什么最后一行是要加载所以它将知道从哪个行开始加载?

所以说它最初加载0-5行,当5进入视图时,它会触发一个事件,该事件将通过相同的ajax但值为5,所以它将从6开始并加载接下来的6行,等等你可以在初始和后续加载中使用相同的函数,它只会被附加到主元素的html中。

修改 好的,所以我们需要一个可以提取和格式化数据的php文件,以及一个包含ajax并显示所有内容的html文件。

用于php,类似于:

$offset = 0;
$sql = "SELECT * FROM table ORDER BY id LIMIT 20, ".$offset;

然后运行一个循环来格式化行的格式。

这将首先使用偏移量的20个帖子填充页面,默认为0。

然后对于Ajax,有两个部分。首先是在最后一个项目进入视图时创建一个动作:

var go = true;
function hitbottom() {
    var sh = $(window).scrollTop();
    var wh = $(window).height();
    var ih = $('.item').last().offset().top;
    if ((sh+wh)<ih && go) {
        //run ajax
    }
}

这应该在滚动时运行,以便在最后一个项目的顶部点击屏幕底部时触发。

第二个是创建ajax表单,它需要知道显示的最后一行的id。它将使用该值来更改php文件中offset函数的值,然后将获取接下来的20行并将它们发送回jquery以附加到回调中的html,依此类推......

ajax部分应该设置为false,然后在回调上将其设置为true以重新启动它。

要附加数据,您可以使用以下内容:

$('#element').append(data);

这是未经测试的,只是一个想法。我会想象它与你的facebook Feed加载方式类似。一旦你到达底部,它会弹出加载图标,并加载下一组帖子。只有这样,它才会在您触及底部之前开始加载,所以除非您立即向下喷射,否则它应该能够非常快速地提取新数据。

这也允许您逐步增加html文件内容,而无需一次加载大量内容并减慢速度。可能仍有限制,但应该非常大。