为了账号安全,请及时绑定邮箱和手机立即绑定

ajax分页怎么实现

嗯嗯,非常好!讲的很清楚!现在遇到一个问题,就是用ajax获取数据怎么分页。

获取有很多数据首页只显示二十条数据假如,怎么设置数据分页,是一定要在php服务端写程序吗?只通过前台的语言能不能实现

正在回答

3 回答

以搜索为例,符合条件的结果有很多,这时一般会采用分页显示,主要有两方面考虑,一方面如果将内容全部显示页面会很长,相应加载慢,用户体验不好;另一方面检索到的数据用户不会全部需要,或者说很少有用户会逐条看所有内容,比如结果有1W条,一般用户最多看20条,剩下的数据的请求就是多余的。此时分页加载就可做到按需加载。

ajax主要请求的是数据,在发送请求时,可以告诉服务器,我现在要请求的是第几页的数据,每页要现实多少条。服务器根据条件给返回相对应的数据,前台直接显示就OK了。所以在请求的过程中,至少要告诉服务器要请求的第几页,每页多少条数据。

PS:可以参考一下各大网站分页请求时数据参数变化 ;0)

0 回复 有任何疑惑可以回复我~
#1

你有鱼丸我有粗面 提问者

嗯嗯!谢谢你的提醒!我昨天看了网上一些资源,算是把它小小突破了!虽然理解还不够透彻,但是现在至少能写出来了!
2016-01-04 回复 有任何疑惑可以回复我~

对于你的问题:

  1. 首先你应该知道为什么会分页?而不是获取所有数据直接展现或者获取所有数据后采用某种方式再进行前台分页。那会影响用户体验!也是为了减少用户等待时间,可能前10条就有我想要的信息,那为什么你还要获取所有呢?

  2. ajax获取数据怎么分页?我也没有做过,但我可以说一下我的思路,按照你说的,首先,获取前20条记录,不同数据库有不同的获取方式,mysql中,你可以采取分页的方式,去获取索引从0开始的20条记录,当然其他数据库可能有更好的获取方式。然后设置一个触发ajax的事件(当用户滚动的高度<与文档的高度-50时,就发送ajax请求),ajax中的参数因该有var args = {"start":20*times, "number":30, "times":times},times是全局变量var times=1,方便我们知道从什么地方开始去获取,start:开始索引,number:要获取的数量,按自己的需求定制,times:第几次获取。得到数据之后,就追加到上一个数据的的末尾,就行了(js/jQuery)。

0 回复 有任何疑惑可以回复我~
#1

你有鱼丸我有粗面 提问者

我知道你说的意思,前台有一个很经典的ajax请求方式就是这样的,就是瀑布流加上你说的那个请求方法,首页只显示部分数据,当鼠标滑动到下面就继续请求加载其他需要的数据。这样根据用户需求加载。这种我没做过但是都了解原理。我现在要做的也差不多是这个意思吧!谢谢!
2016-01-03 回复 有任何疑惑可以回复我~
#2

堂堂堂堂糖糖糖童鞋 回复 你有鱼丸我有粗面 提问者

能不能给个最佳答案,我想要慕课君抱枕!
2016-01-03 回复 有任何疑惑可以回复我~
#3

你有鱼丸我有粗面 提问者 回复 堂堂堂堂糖糖糖童鞋

哈哈哈!你的脸跟你头像一样大!(开玩笑别介意), 既然你都诚心诚意的问了,那我就大发慈悲的采纳你的意见吧!
2016-01-04 回复 有任何疑惑可以回复我~
#4

堂堂堂堂糖糖糖童鞋 回复 你有鱼丸我有粗面 提问者

那先谢过了!
2016-01-04 回复 有任何疑惑可以回复我~
查看1条回复

基本DOM操作就可以实现啦。你获取后台的数据,然后可以封装成一个多维的数组,用一个选项卡来实现分页功能,每一页设置一个table,首页的table只有20行,这是最简单的渲染手段了

0 回复 有任何疑惑可以回复我~
#1

你有鱼丸我有粗面 提问者

就是有很多table 第一个table之接受1-20行的数据,第二个table接受21-40这样.......依次输出渲染是吧?,当点击第一页的时候就把第一个table显示其他隐藏,点第二页的时候就显示第二个table,其他隐藏。是不是这样做? 我一开始也是这么想的,但是看到数据以后有上万页呢,所以这样会很繁琐,重复动作太多。
2016-01-03 回复 有任何疑惑可以回复我~
#2

迷途的马尔斯 回复 你有鱼丸我有粗面 提问者

你要这样想,10W+数据与你前端无关,你每次发起的ajax请求只是请求单个分页的数据,至于分页怎么优化要靠后端来处理
2016-01-03 回复 有任何疑惑可以回复我~
#3

你有鱼丸我有粗面 提问者 回复 迷途的马尔斯

好吧!也是一种方法!不过我昨天在网上看了一些资料,自己整出来了!思路都差不多!谢谢了!
2016-01-04 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
Ajax全接触
  • 参与学习       224850    人
  • 解答问题       663    个

本课程通过一个案例,讲解Ajax的相关概念原理实现方式和应用

进入课程

ajax分页怎么实现

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信