jquery pagination分页的两种实现方式

原文链接：http://blog.csdn.net/qq_37936542/article/details/79457012

此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。

一：下载地址，及方法参数介绍

下载地址：点击打开链接

1. 名                   描述                                   参数值
2. maxentries          总条目数                             必选参数，整数
3. items_per_page          每页显示的条目数                     可选参数，默认是10
4. num_display_entries 连续分页主体部分显示的分页条目数             可选参数，默认是10
5. current_page            当前选中的页面                              可选参数，默认是0，表示第1页
6. num_edge_entries    两侧显示的首尾分页的条目数            可选参数，默认是0
7. link_to                 分页的链接                            字符串，可选参数，默认是"#"
8. prev_text           “前一页”分页按钮上显示的文字          字符串参数，可选，默认是"Prev"
9. next_text           “下一页”分页按钮上显示的文字              字符串参数，可选，默认是"Next"
10. ellipse_text            省略的页数用什么文字表示                     可选字符串参数，默认是"…"
11. prev_show_always    是否显示“前一页”分页按钮                    布尔型，可选参数，默认为true，即显示“前一页”按钮
12. next_show_always    是否显示“下一页”分页按钮                    布尔型，可选参数，默认为true，即显示“下一页”按钮
13. callback            回调函数                             默认无执行效果

二：引入jquery.js、jquery.pagination.js和pagination.css

1. <script src="js/jquery.min.js"></script>
2. <script src="js/jquery.pagination.js"></script>
3. <link href="js/pagination.css" rel="stylesheet" type="text/css" />

三：准备jsp页面元素

1. <!--  显示分页数据 -->
2. <div class="list"></div>
3. <!-- 显示页码 -->
4. <div class="Pagination" id="pagination"></div>

四：实现异步加载
js代码：

1. $(function() {
2. var pageSize = 5; // 每页显示多少条记录
3. var total; // 总共多少记录
4. Init(0); // 注意参数，初始页面默认传到后台的参数，第一页是0;
5. $(".Pagination").pagination(total, {
6. callback : PageCallback,
7. prev_text : '上一页',
8. next_text : '下一页',
9. items_per_page : pageSize,
10. num_display_entries : 4, // 连续分页主体部分显示的分页条目数
11. num_edge_entries : 1, // 两侧显示的首尾分页的条目数
12. });
13. //点击上一页、下一页、页码的时候触发的事件
14. function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值，后一个参数表示装载容器。
15. Init(index);
16. }
17. function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值
18. $.ajax({
19. type : "get",
20. url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="
21. + pageIndex,
22. async : false,
23. dataType : "json",
24. success : function(data) {
25. // 赋值total，用于计算
26. total = data.total;
27. //拼接html(这个部分根据自己的需求去实现)
28. var list = data.pList;
29. var html = '<div>'
30. for (var i = 0; i < list.length; i++) {
31. html += "<p>" + list[i].name + "</p>"
32. }
33. html += '</div>';
34. $('.list').html(html)
35. },
36. error : function() {
37. alert("请求超时，请重试！");
38. }
39. });
40. };
41. });

后台代码：
pojo对象

1. package com.debo.map.pojo;
2. public class People {
3. private String name;
4. private int limit;//用于分页
5. private int Offset;//用于分页
6. public String getName() {
7. return name;
8. }
9. public void setName(String name) {
10. this.name = name;
11. }
12. public int getLimit() {
13. return limit;
14. }
15. public void setLimit(int limit) {
16. this.limit = limit;
17. }
18. public int getOffset() {
19. return Offset;
20. }
21. public void setOffset(int offset) {
22. Offset = offset;
23. }
24. }

controller代码

1. @RequestMapping(value="/getPeopleList",method = RequestMethod.GET)
2. @ResponseBody
3. public Map<String,Object> getPeopleList(HttpServletRequest request){
4. //创建对象，封装查询条件
5. People people = new People();
6. //获取每页记录数
7. int limit = Integer.parseInt(request.getParameter("rows"));
8. people.setLimit(limit);
9. //获取当前页数
10. int page = Integer.parseInt(request.getParameter("page"));
11. people.setOffset(page*limit);
12. Map<String, Object> map = new HashMap<String,Object>();
13. //查询总记录数
14. int total = mapService.countNumb();
15. map.put("total", total);
16. //查询当前页面需要的数据
17. List<People> pList = mapService.getPeopleList(people);
18. map.put("pList", pList);
19. return map;
20. }

mapper配置sql语句

1. <select id="countNumb" resultType="int">
2. SELECT count(1)
3. FROM people
4. </select>
5. <select id="getPeopleList" resultType="com.debo.map.pojo.People">
6. SELECT * FROM people
7. LIMIT #{offset},#{limit}
8. </select>

五：实现一次性加载
js代码：

1. $(function() {
2. //默认每一页显示5条数据
3. getMsg(5)
4. //分页实现函数
5. function getMsg(num) {
6. $.ajax({
7. url : ROOT+'/map/getPeopleList',
8. type : 'GET',
9. dataType : 'json',
10. success : function(data) {
11. // 1.计算分页数量
12. var showNum = num;
13. var dataL = data.length;
14. var pageNum = Math.ceil(dataL / showNum);
15. $('.Pagination').pagination(pageNum,{
16. num_edge_entries : 1,
17. num_display_entries : 4,
18. prev_text : "<<",
19. next_text : ">>",
20. callback : function(index) {
21. var html = '<div>'
22. for (var i = showNum * index; i < showNum
23. * index + showNum; i++) {
24. if (i < dataL) {
25. html += "<p>" + data[i].name + "</p>"
26. }
27. }
28. html += '</div>';
29. $('.list').html(html)
30. })
31. }
32. })
33. }
34. }
35. })

后台代码：
pojo对象

1. package com.debo.map.pojo;
2. public class People {
3. private String name;
4. public String getName() {
5. return name;
6. }
7. public void setName(String name) {
8. this.name = name;
9. }
10. }

controller层代码

1. @RequestMapping(value="/getPeopleList",method = RequestMethod.GET)
2. @ResponseBody
3. public List<People> getPeopleList(HttpServletRequest request){
4. List<People> pList = mapService.getPeopleList();
5. return pList;
6. }

mapper配置sql语句

1. <select id="getPeopleList" resultType="com.debo.map.pojo.People">
2. SELECT * from people
3. </select>

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程：https://www.jianshu.com/p/e8197d4d9880

领取方式：
如果需要学习视频，欢迎关注 【编程微刊】微信公众号，回复【领取资源】一键领取以下所有干货资源，获取更多有用技术干货、文档资料。所有文档会持续更新，欢迎关注一起成长！

ok了