PC端好用的分页插件jquery.pagination.js使用说明

jquery.pagination.js是一款轻量级的分页插件，依赖JQuery，使用起来方便简单。
效果图如下：

步骤一：引入相关资源

步骤二：页面添加一个元素显示分页

步骤三：异步请求数据，并将请求到的数据进行分页处理

绑定分页参数说明：

currentPage: 当前页码,默认值1

totalPage: 总共有多少页，72条数据每页显示10条则共8页

isShow: 是否显示首页、尾页 true：显示 false：不显示，默认值true

count: 分页条显示可见页码数量 ，默认值5

homePageText: 第一页显示文字，默认值“首页”

endPageText: 最后一页显示文字，默认值“尾页”

prevPageText: 上一页显示文字，默认值“上一页”

nextPageText: 下一页显示文字，默认值“下一页”

callback: 点击翻页绑定事件

实际开发中currentPage、totalPage必传，其他视情况而定，代码示例：

/*分页查询*/
    function queryNewsList(page){
        /*当前页展示条数，默认10条*/
        var rows = 10;
        /*总条数，假设总共有72条*/
        var total = 72;
        $.ajax({
            cache: false,
            type: "POST",
            url:"getNewsList",
                /*当前页码*/
                page:page,
                rows:rows,
                total:total
            },
            async: false,
            dataType:"json",
            contentType:"application/x-www-form-urlencoded",
            error: function(request) { },
            success: function(data) {
                /*绑定分页事件*/
                $("#pagination").pagination({
                    /*当前页码*/
                    currentPage: page,
                    /*总共有多少页*/
                    totalPage: Math.ceil(total/rows),
                    /*是否显示首页、尾页 true：显示 false：不显示*/
                    isShow:true,
                    /*分页条显示可见页码数量*/
                    count:5,
                    /*第一页显示文字*/
                    homePageText:'首页',
                    /*最后一页显示文字*/
                    endPageText:'尾页',
                    /*上一页显示文字*/
                    prevPageText:'上一页',
                    /* 下一页显示文字*/
                    nextPageText:'下一页',
                    /*点击翻页绑定事件*/
                    callback: function(page) {
                        queryNewsList(page);
                    }
                });
                var newsList = Handlebars.compile($("#newsListTemplate").html());
                $('#newsList').html(newsList(data));
            }
        });
    }

后台代码：

@RequestMapping(value="getNewsList",method={RequestMethod.POST,RequestMethod.GET},produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public String getPage(HttpServletRequest request){
        /*当前页码*/
        int pageNo = NumberUtils.toInt(request.getParameter("page"), 1);
        /*当前页展示条数，默认10条*/
        int pageSize = NumberUtils.toInt(request.getParameter("rows"), 10);
        /*总条数（即select count(*) from data_base）默认72条*/
        int total = NumberUtils.toInt(request.getParameter("total"), 72);
        List> list = new ArrayList<>();
        /*起始页码*/
        int fromPage = (pageNo-1)*pageSize+1;
        for (int i = fromPage,l=pageNo*pageSize; i <= l ; i++){
            /*最多只需要输出72条数据*/
            if(i <= total){
                Map map = new HashMap<>(2);
                map.put("title","新闻资讯"+i);
                map.put("desc","当前页码："+pageNo);
                list.add(map);
            }
        }
        return JSONObject.toJSONString(list);
    }

前端完整代码：

附上jquery.pagination.js源码：

!function(t,a,e,i){var n=function(a,e){this.ele=a,this.defaults={currentPage:1,totalPage:10,isShow:!0,count:5,homePageText:"首页",endPageText:"尾页",prevPageText:"上一页",nextPageText:"下一页",callback:function(){}},this.opts=t.extend({},this.defaults,e),this.current=this.opts.currentPage,this.total=this.opts.totalPage,this.init()};n.prototype={init:function(){this.render(),this.eventBind()},render:function(){var t=this.opts,a=this.current,e=this.total,i=this.getPagesTpl(),n=this.ele.empty();this.isRender=!0,this.homePage=''+t.homePageText+"",this.prevPage=''+t.prevPageText+"",this.nextPage=''+t.nextPageText+"",this.endPage=''+t.endPageText+"",this.checkPage(),this.isRender&&n.html("
"+this.homePage+this.prevPage+i+this.nextPage+this.endPage+"
")},checkPage:function(){var t=this.opts,a=this.total,e=this.current;t.isShow||(this.homePage=this.endPage=""),1===e&&(this.homePage=this.prevPage=""),e===a&&(this.endPage=this.nextPage=""),1===a&&(this.homePage=this.prevPage=this.endPage=this.nextPage=""),a<=1&&(this.isRender=!1)},getPagesTpl:function(){var t=this.opts,a=this.total,e=this.current,i="",n=t.count;if(a<=n)for(g=1;g<=a;g++)i+=g===e?''+g+"":''+g+"";else{var s=n/2;if(e<=s)for(g=1;g<=n;g++)i+=g===e?''+g+"":''+g+"";else{var r=Math.floor(s),h=e+r,o=e-r,c=n%2==0;h>a&&(c?(o-=h-a-1,h=a+1):(o-=h-a,h=a)),c||h++;for(var g=o;g'+g+"":''+g+""}}return i},setPage:function(t,a){return t===this.current&&a===this.total?this.ele:(this.current=t,this.total=a,this.render(),this.ele)},getPage:function(){return{current:this.current,total:this.total}},eventBind:function(){var a=this,e=this.opts.callback;this.ele.off("click").on("click",".ui-pagination-page-item",function(){var i=t(this).data("current");a.current!=i&&(a.current=i,a.render(),e&&"function"==typeof e&&e(i))})}},t.fn.pagination=function(t,a,e){if("object"==typeof t){var i=new n(this,t);this.data("pagination",i)}return"string"==typeof t?this.data("pagination")[t](a,e):this}}(jQuery,window,document);

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。