前后端结合怎么实现amazeUI分页效果

这篇文章给大家分享的是有关前后端结合怎么实现amazeUI分页效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

前端实现

引入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:;\">&raquo;</a></li>" : "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">&raquo;</a></li>";                var preBar = offset == 1 ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">&laquo;</a></li>" : "<li><a yxhref=\"" + opts.url + (offset - 1) + "\">&laquo;</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:;\">&laquo;</a></li>";            //上一页,（禁用的效果）            //如果只有一页，那么禁用下一页            var nextBar = opts.totalBars > 1 ? "<li><a yxhref=\"" + opts.url + 2 + "\">&raquo;</a></li>" : "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">&raquo;</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))

获取总页数，再获取分页

$.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<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分页效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！