前后端结合实现amazeUI分页

借鉴

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

前端实现

1、引入paginator.js

(function ($) {$.fn.paginator = function (options) {//this指向当前的选择器var config = {url: "",pageParent: "",totalBars: -1,limit: -1,offset: 1,callback: null}//合并参数var opts = $.extend(config, options);opts.totalBars = Math.ceil(opts.totalBars / opts.limit);//计算按钮的总个数//获取offset参数var queryString = function (url) {var offset = (url.split("?")[1]).split("=")[1];return parseInt(offset);}//ajax核心方法，用于分页的数据操作var ajaxCore = function (offset, fn) {$.ajax({"url": opts.url,"data": {"offset": offset,"limit": opts.limit},"dataType": "JSON","method": "POST","success": fn});}//重新装配分页按钮var pageCore = function (offset) {if (opts.offset == offset) {return;} //如果是当前页面，那么就什么事都不用干了！else {ajaxCore(offset, opts.callback);$(opts.pageParent).empty();//否则，清空所有的节点，重新向DOM插入新的分页按钮var output = "";var nextBar = offset == opts.totalBars ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">»</a></li>" : "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">»</a></li>";var preBar = offset == 1 ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">«</a></li>" : "<li><a yxhref=\"" + opts.url + (offset - 1) + "\">«</a></li>";//组装向上一个节点和下一页节点if (opts.totalBars > 7) {if (offset < 5) {output += preBar;for (var i = 1; i <= 5; i++) {if (i == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + offset + "\">" + offset + "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + i + "\">" + i + "</a></li>";}}output += "<li><span>...</span></li>";output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>" + nextBar;} else if (offset >= 5 && offset <= opts.totalBars - 4) {//当页面大于7个的时候，那么在第五个和倒数第五个时，执行output += preBar;output += "<li><a yxhref=\"" + opts.url + 1 + "\">" + 1 + "</a></li>";//第一个output += "<li><span>...</span></li>"; //省略号output += "<li><a yxhref=\"" + opts.url + (offset - 1) + "\">" + (offset - 1) + "</a></li>";output += "<li class=\"am-active\"><a  yxhref=\"" + opts.url + offset + "\">" + offset + "</a></li>";output += "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">" + (offset + 1) + "</a></li>";output += "<li><span>...</span></li>"; //省略号;output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>"; //尾页output += nextBar;} else if (offset > opts.totalBars - 4 && offset <= opts.totalBars) {//当页面位于倒数第四个时候output += preBar;output += "<li><a yxhref=\"" + opts.url + 1 + "\">" + 1 + "</a></li>" + "<li><span>...</span></li>";for (var j = 4; j >= 0; j--) {if (opts.totalBars - j == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + (opts.totalBars - j) + "\">" + (opts.totalBars - j) + "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + (opts.totalBars - j) + "\">" + (opts.totalBars - j) + "</a></li>";}}output += nextBar;} else {console.log("分页数据出错！");return;}} else {output += preBar;for (var i = 1; i <= opts.totalBars; i++) {if (i == offset) {output += "<li class=\"am-active\"><a yxhref=\"" + opts.url + offset + "\">" + offset+ "</a></li>";} else {output += "<li><a yxhref=\"" + opts.url + i + "\">" + i+ "</a></li>";}}output += nextBar;}$(opts.pageParent).append(output);opts.offset = offset; //将偏移量赋值给config里面的offset}}//清理函数，防止多绑定事件和重新计算分页var clear = function () {$(opts.pageParent).empty().undelegate();}//初始化装配分页按钮var init = function (fn) {if (typeof (fn) != "function") {console.log("将不能正确的执行回调函数");} else {opts.callback = fn;}clear();ajaxCore(1, opts.callback);//执行初始化ajax方法var preBar = "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">«</a></li>";//上一页,（禁用的效果）//如果只有一页，那么禁用下一页var nextBar = opts.totalBars > 1 ? "<li><a yxhref=\"" + opts.url + 2 + "\">»</a></li>" : "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">»</a></li>";//最后一页var output = "<li class=\"am-active\"><a yxhref=\"" + opts.url + 1 + "\">1</a></li>";if (opts.totalBars <= 7) {for (var i = 1; i < opts.totalBars; i++) {output += "<li><a yxhref=\"" + opts.url + (i + 1) + "\">" + (i + 1) + "</a></li>";}} else {for (var j = 1; j < 5; j++) {output += "<li><a yxhref=\"" + opts.url + (j + 1) + "\">" + (j + 1) + "</a></li>";}output += "<li><span>...</span></li>";output += "<li><a yxhref=\"" + opts.url + (opts.totalBars) + "\">" + (opts.totalBars) + "</a></li>";}$(opts.pageParent).delegate("a","click", function () {var offset = queryString($(this).attr("yxhref"));console.log("ok");pageCore(offset);});$(opts.pageParent).append(preBar + output + nextBar);};init(opts.callback);//初始化分页引擎}
}(window.jQuery))

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

$.ajax({type: "GET",url: selectSendNumberNumsByContURL,//获取总数data: {},dataType: "json",success: function(data){if (data[0].code == 200) {$("#paginator").paginator({url: selectSendNumberByContURL + "?offsets=",pageParent: "#paginator",totalBars: data[0].allNums,limit: 10,offset: 1,callback: function (data1) {//清空DOM节点//动态加dom节点}});}else{}},error: function (err) {}});

后端实现（分页）

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

@RequestMapping(value = "/selectNumberCheckByCont", method = RequestMethod.POST)@ResponseBodypublic List<ReturnUtils> selectNumberCheckByCont(HttpServletRequest request,HttpServletResponse response) throws Exception {//统一设置返回数据格式response.setContentType("application/json");response.setHeader("Pragma", "no-cache");response.setCharacterEncoding("UTF-8");String offset = request.getParameter("offset");String limit = request.getParameter("limit");List<ReturnUtils> list = iNumberCheckService.selectNumberCheckByCont(offset, limit);return list;}

前后端结合实现amazeUI分页相关推荐

前后端分离研究，以及接口规范
前言随着互联网的高速发展,各种框架层出不穷,前端页面的展示业务.要求.质量.交互体验越来越灵活.炫丽,响应体验也要求越来越高,工作量越来越繁重! 而后端责着重提供各种服务以及高并发.高可用.高性能. ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
Bootstrap4+MySQL前后端综合实训-Day06-PM【MD5加码-生成32位md5码、ResultData.java、分页查询用户数据、添加用户按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 MD5加码生成32位md5码 ResultData.java 分页查询 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
php bootstrap 分页查询,深入了解Bootstrap table表格插件（二）前后端分页模糊查询...
这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
难点:模糊查询后再次分页,并可以选择页数. 最终环境配置: maven3.8:依赖包管理 IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从 ...
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传分页】文件上传也不过如此～
前后端分离 – 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统[文件上传分页 ] 文件上传也不过如此~ 引言 Hello,我是Bug终结者,一名热爱后端J ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...

前后端结合实现amazeUI分页

前后端结合实现amazeUI分页

前后端结合实现amazeUI分页

借鉴

前端实现

后端实现（分页）

前后端结合实现amazeUI分页相关推荐

最新文章

热门文章