您的位置:首页 > Web前端 > > 正文

后端ui框架排名(前后端结合实现amazeUI分页效果)

更多 时间:2021-10-21 07:32:18 类别:Web前端 浏览量:1450

后端ui框架排名

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

前后端结合实现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)
        @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分页的文章就介绍到这了,更多相关amazeUI分页内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    标签:分页 amazeui
    您可能感兴趣