前后端结合实现amazeUI分页，代码如下所示；
借鉴

1. 本文在博客https://blog.csdn.net/brave_coder/article/details/52367124的基础上实现的，非常感谢大佬的分享。

复制代码

前端实现
1、引入paginator.js

1. (function ($) {
   
2.     $.fn.paginator = function (options) {
   
3.         //this指向当前的选择器
   
4.         var config = {
   
5.             url: "",
   
6.             pageParent: "",
   
7.             totalBars: -1,
   
8.             limit: -1,
   
9.             offset: 1,
   
10.             callback: null
    
11.         }
    
12.         //合并参数
    
13.         var opts = $.extend(config, options);
    
14. 
    
15.         opts.totalBars = Math.ceil(opts.totalBars / opts.limit);
    
16.         //计算按钮的总个数
    
17. 
    
18.         //获取offset参数
    
19.         var queryString = function (url) {
    
20.             var offset = (url.split("?")[1]).split("=")[1];
    
21.             return parseInt(offset);
    
22.         }
    
23. 
    
24.         //ajax核心方法，用于分页的数据操作
    
25.         var ajaxCore = function (offset, fn) {
    
26.             $.ajax({
    
27.                 "url": opts.url,
    
28.                 "data": {
    
29.                     "offset": offset,
    
30.                     "limit": opts.limit
    
31.                 },
    
32.                 "dataType": "JSON",
    
33.                 "method": "POST",
    
34.                 "success": fn
    
35.             });
    
36.         }
    
37. 
    
38.         //重新装配分页按钮
    
39.         var pageCore = function (offset) {
    
40.             if (opts.offset == offset) {
    
41.                 return;
    
42.             } //如果是当前页面，那么就什么事都不用干了！
    
43.             else {
    
44.                 ajaxCore(offset, opts.callback);
    
45.                 $(opts.pageParent).empty();
    
46.                 //否则，清空所有的节点，重新向DOM插入新的分页按钮
    
47.                 var output = "";
    
48.                 var nextBar = offset == opts.totalBars ? "<li class="am-disabled"><a yxhref="javascript:;">»</a></li>" : "<li><a yxhref="" + opts.url + (offset + 1) + "">»</a></li>";
    
49.                 var preBar = offset == 1 ? "<li class="am-disabled"><a yxhref="javascript:;">«</a></li>" : "<li><a yxhref="" + opts.url + (offset - 1) + "">«</a></li>";
    
50.                 //组装向上一个节点和下一页节点
    
51.                 if (opts.totalBars > 7) {
    
52.                     if (offset < 5) {
    
53.                         output += preBar;
    
54.                         for (var i = 1; i <= 5; i++) {
    
55.                             if (i == offset) {
    
56.                                 output += "<li class="am-active"><a yxhref="" + opts.url + offset + "">" + offset + "</a></li>";
    
57.                             } else {
    
58.                                 output += "<li><a yxhref="" + opts.url + i + "">" + i + "</a></li>";
    
59.                             }
    
60.                         }
    
61.                         output += "<li><span>...</span></li>";
    
62.                         output += "<li><a yxhref="" + opts.url + (opts.totalBars) + "">" + (opts.totalBars) + "</a></li>" + nextBar;
    
63.                     } else if (offset >= 5 && offset <= opts.totalBars - 4) {
    
64.                         //当页面大于7个的时候，那么在第五个和倒数第五个时，执行
    
65.                         output += preBar;
    
66.                         output += "<li><a yxhref="" + opts.url + 1 + "">" + 1 + "</a></li>";
    
67.                         //第一个
    
68.                         output += "<li><span>...</span></li>"; //省略号
    
69. 
    
70.                         output += "<li><a yxhref="" + opts.url + (offset - 1) + "">" + (offset - 1) + "</a></li>";
    
71. 
    
72.                         output += "<li class="am-active"><a  yxhref="" + opts.url + offset + "">" + offset + "</a></li>";
    
73. 
    
74.                         output += "<li><a yxhref="" + opts.url + (offset + 1) + "">" + (offset + 1) + "</a></li>";
    
75. 
    
76.                         output += "<li><span>...</span></li>"; //省略号;
    
77. 
    
78.                         output += "<li><a yxhref="" + opts.url + (opts.totalBars) + "">" + (opts.totalBars) + "</a></li>"; //尾页
    
79. 
    
80.                         output += nextBar;
    
81. 
    
82.                     } else if (offset > opts.totalBars - 4 && offset <= opts.totalBars) {
    
83.                         //当页面位于倒数第四个时候
    
84.                         output += preBar;
    
85.                         output += "<li><a yxhref="" + opts.url + 1 + "">" + 1 + "</a></li>" + "<li><span>...</span></li>";
    
86. 
    
87.                         for (var j = 4; j >= 0; j--) {
    
88.                             if (opts.totalBars - j == offset) {
    
89.                                 output += "<li class="am-active"><a yxhref="" + opts.url + (opts.totalBars - j) + "">" + (opts.totalBars - j) + "</a></li>";
    
90.                             } else {
    
91.                                 output += "<li><a yxhref="" + opts.url + (opts.totalBars - j) + "">" + (opts.totalBars - j) + "</a></li>";
    
92.                             }
    
93.                         }
    
94.                         output += nextBar;
    
95.                     } else {
    
96.                         console.log("分页数据出错！");
    
97.                         return;
    
98.                     }
    
99.                 } else {
    
100.                     output += preBar;
     
101.                     for (var i = 1; i <= opts.totalBars; i++) {
     
102.                         if (i == offset) {
     
103.                             output += "<li class="am-active"><a yxhref="" + opts.url + offset + "">" + offset+ "</a></li>";
     
104.                         } else {
     
105.                             output += "<li><a yxhref="" + opts.url + i + "">" + i+ "</a></li>";
     
106.                         }
     
107.                     }
     
108.                     output += nextBar;
     
109.                 }
     
110.                 $(opts.pageParent).append(output);
     
111.                 opts.offset = offset; //将偏移量赋值给config里面的offset
     
112.             }
     
113.         }
     
114. 
     
115.         //清理函数，防止多绑定事件和重新计算分页
     
116.         var clear = function () {
     
117.             $(opts.pageParent).empty().undelegate();
     
118.         }
     
119. 
     
120. 
     
121.         //初始化装配分页按钮
     
122.         var init = function (fn) {
     
123.             if (typeof (fn) != "function") {
     
124.                 console.log("将不能正确的执行回调函数");
     
125.             } else {
     
126.                 opts.callback = fn;
     
127.             }
     
128.             clear();
     
129.             ajaxCore(1, opts.callback);//执行初始化ajax方法
     
130.             var preBar = "<li class="am-disabled"><a yxhref="javascript:;">«</a></li>";
     
131.             //上一页,（禁用的效果）
     
132.             //如果只有一页，那么禁用下一页
     
133.             var nextBar = opts.totalBars > 1 ? "<li><a yxhref="" + opts.url + 2 + "">»</a></li>" : "<li class="am-disabled"><a yxhref="javascript:;">»</a></li>";
     
134.             //最后一页
     
135.             var output = "<li class="am-active"><a yxhref="" + opts.url + 1 + "">1</a></li>";
     
136. 
     
137.             if (opts.totalBars <= 7) {
     
138.                 for (var i = 1; i < opts.totalBars; i++) {
     
139.                     output += "<li><a yxhref="" + opts.url + (i + 1) + "">" + (i + 1) + "</a></li>";
     
140.                 }
     
141.             } else {
     
142.                 for (var j = 1; j < 5; j++) {
     
143.                     output += "<li><a yxhref="" + opts.url + (j + 1) + "">" + (j + 1) + "</a></li>";
     
144.                 }
     
145.                 output += "<li><span>...</span></li>";
     
146.                 output += "<li><a yxhref="" + opts.url + (opts.totalBars) + "">" + (opts.totalBars) + "</a></li>";
     
147.             }
     
148.             $(opts.pageParent).delegate("a","click", function () {
     
149.                 var offset = queryString($(this).attr("yxhref"));
     
150.                 console.log("ok");
     
151.                 pageCore(offset);
     
152.             });
     
153.             $(opts.pageParent).append(preBar + output + nextBar);
     
154.         };
     
155.         init(opts.callback);//初始化分页引擎
     
156.     }
     
157. }(window.jQuery))

复制代码

2、获取总页数，再获取分页

1. $.ajax({
   
2.         type: "GET",
   
3.         url: selectSendNumberNumsByContURL,//获取总数
   
4.         data: {},
   
5.         dataType: "json",
   
6.         success: function(data){
   
7. 
   
8.             if (data[0].code == 200) {
   
9. 
   
10.                 $("#paginator").paginator({
    
11.                     url: selectSendNumberByContURL + "?offsets=",
    
12.                     pageParent: "#paginator",
    
13.                     totalBars: data[0].allNums,
    
14.                     limit: 10,
    
15.                     offset: 1,
    
16.                     callback: function (data1) {
    
17. 
    
18.                         //清空DOM节点
    
19.                         
    
20.                         //动态加dom节点
    
21.                     }
    
22.                 });
    
23.             }else{
    
24. 
    
25.             }
    
26.         },
    
27.         error: function (err) {
    
28. 
    
29.         }
    
30.     });

复制代码

后端实现（分页）
这里是controller，拿到offset（第几页）参数、limit（每页多少数量），再写SQL实现分页就好了。

1. @RequestMapping(value = "/selectNumberCheckByCont", method = RequestMethod.POST)
   
2.     @ResponseBody
   
3.     public List<ReturnUtils> selectNumberCheckByCont(HttpServletRequest request,
   
4.                                                      HttpServletResponse response) throws Exception {
   
5. 
   
6.         //统一设置返回数据格式
   
7.         response.setContentType("application/json");
   
8.         response.setHeader("Pragma", "no-cache");
   
9.         response.setCharacterEncoding("UTF-8");
   
10. 
    
11.         String offset = request.getParameter("offset");
    
12.         String limit = request.getParameter("limit");
    
13. 
    
14.         List<ReturnUtils> list = iNumberCheckService.selectNumberCheckByCont(offset, limit);
    
15. 
    
16.         return list;
    
17.     }

复制代码

总结
到此这篇关于前后端结合实现amazeUI分页的文章就介绍到这了,更多相关amazeUI分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/741754.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！