导航：首页 > 开发技术 >

如何通过前后端结合实现amazeUI分页效果

发表于：2025-01-21 作者：千家信息网编辑

千家信息网最后更新 2025年01月21日，这篇文章主要介绍了如何通过前后端结合实现amazeUI分页效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何通过前后端结合实现amazeUI分页效果文章都会有所收获，

千家信息网最后更新 2025年01月21日如何通过前后端结合实现amazeUI分页效果

这篇文章主要介绍了如何通过前后端结合实现amazeUI分页效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何通过前后端结合实现amazeUI分页效果文章都会有所收获，下面我们一起来看看吧。

前端实现

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 ? "»
" : "»
";                var preBar = offset == 1 ? "«
" : "«
";                //组装向上一个节点和下一页节点                if (opts.totalBars > 7) {                    if (offset < 5) {                        output += preBar;                        for (var i = 1; i <= 5; i++) {                            if (i == offset) {                                output += "" + offset + "
";                            } else {                                output += "" + i + "
";                            }                        }                        output += "...
";                        output += "" + (opts.totalBars) + "
" + nextBar;                    } else if (offset >= 5 && offset <= opts.totalBars - 4) {                        //当页面大于7个的时候，那么在第五个和倒数第五个时，执行                        output += preBar;                        output += "" + 1 + "
";                        //第一个                        output += "...
"; //省略号                         output += "" + (offset - 1) + "
";                         output += "" + offset + "
";                         output += "" + (offset + 1) + "
";                         output += "...
"; //省略号;                         output += "" + (opts.totalBars) + "
"; //尾页                         output += nextBar;                     } else if (offset > opts.totalBars - 4 && offset <= opts.totalBars) {                        //当页面位于倒数第四个时候                        output += preBar;                        output += "" + 1 + "
" + "...
";                         for (var j = 4; j >= 0; j--) {                            if (opts.totalBars - j == offset) {                                output += "" + (opts.totalBars - j) + "
";                            } else {                                output += "" + (opts.totalBars - j) + "
";                            }                        }                        output += nextBar;                    } else {                        console.log("分页数据出错！");                        return;                    }                } else {                    output += preBar;                    for (var i = 1; i <= opts.totalBars; i++) {                        if (i == offset) {                            output += "" + offset+ "
";                        } else {                            output += "" + i+ "
";                        }                    }                    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 = "«
";            //上一页,（禁用的效果）            //如果只有一页，那么禁用下一页            var nextBar = opts.totalBars > 1 ? "»
" : "»
";            //最后一页            var output = "1
";             if (opts.totalBars <= 7) {                for (var i = 1; i < opts.totalBars; i++) {                    output += "" + (i + 1) + "
";                }            } else {                for (var j = 1; j < 5; j++) {                    output += "" + (j + 1) + "
";                }                output += "...
";                output += "" + (opts.totalBars) + "
";            }            $(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)    @ResponseBody    public List 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 list = iNumberCheckService.selectNumberCheckByCont(offset, limit);        return list;    }

关于"如何通过前后端结合实现amazeUI分页效果"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"如何通过前后端结合实现amazeUI分页效果"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。

很赞哦！