jQuery-ajax如何实现前端分页

jQuery-ajax如何实现前端分页

清晨说ぺ晚安 发布于 2017-03-07 字数 298 浏览 1365 回复 3

一般的ajax无刷新分页都是通过后台请求道json数据,然后页面进行组装,然后在点击下一页的时候,再向后台请求。但我现在想实现的效果是,只向后台读取一次数据,然后拿到全部的json,然后在前台进行组装和分页。(ps:可以看得出的区别就是在网页的地址上不会再出现id=1 id=2什么的,只会看到静态页进行无刷新分页)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

夜无邪 2017-06-13 3 楼

所说的一次读取和分页读取从实现上是完全一致的,因为接口设计的时候,肯定有指定数据条目长度的字段(如page_size),这个字段由原来的page_size=10或者20改成足够大,不就是一次读取吗?跟网页地址后跟上id=1、2是两码事。
之所以要做分页,其一是因为展示的内容如果过多,页面很冗繁杂乱;其二是因为http response内容字节数过大的话,网络传输耗时也会很长。换句话说,如果请求的数据内容是预知的并且数据量很小,那就根本没必要做分页,但如果是类似UGC或者其他大数据的话,这样一次拉取,对从db->server->http transfer-->browser client 都将是灾难性的。
建议可以从产品策略上优化,例如在用户看第一页的时候预加载第二页,依次类推,给用户的感觉是无需等待。

浮生未歇 2017-06-06 2 楼

ajax分页本身在浏览器的地址栏就不会显示页数啊,jquery有ajax的分页插件的,使用还是比较简单的,正如@imbean所说的,如果数据量大,你一次返回所有json,那就是没起到分页的初衷了,还不如整页直接全部显示了

想挽留 2017-04-12 1 楼

首先应该明确需求,我的理解是“可以看得出的区别就是在网页的地址上不会再出现id=1 id=2什么的,只会看到静态页进行无刷新分页。”这种问题不一定非要使用你所说的实现方式。以下是我的实现思路,仅供参考:
在页面中开辟一个DIV(answer_list),专门用于展示你的数据(例如:div中可以包含某个列表);DIV中的数据通过ajax异步获取,当然具体的翻页参数应该是在请求ajax数据过程中拼入的。
注意:ajax实际上也是jsp页面,只不过在ajax中已经拼接好了页面所需要展示的html代码,所以待ajax返回数据后,直接填充在刚才所说的DIV中即可。

ajax示例:
function getAnswers(_param){
var paramForm = $("#frmData").serialize();//序列化参数
var sUrl = "../discuss/ajax/get_answers.jsp?";
$.ajax({
type:"post",
url:sUrl,
data:paramForm,
success:function(data){
$("#answer_list").html(data);//回填数据
},
error:function(data){
}
});
}

你每次点击“下一页”,实际上完成的操作是:ajax获取所需参数(包含分页参数和其它查询条件);ajax异步请求数据;获得ajax返回的数据;将数据回填到DIV中