分页控件

public/resource/css/public.css

@@ -192,3 +192,19 @@ a:hover{
     margin-top: 7px;
     margin-left: 7px;
 }
+
+#pagediv a,#pagediv span{
+    display: inline-block;
+    width: 30px;
+    line-height: 30px;
+    text-align: center;
+
+}
+#pagediv .active{
+    color: #fff;
+    background-color: #00a5e0;
+}
+#pagediv .jump-ipt{
+    width: 50px;
+    margin-left: 5px;
+}
\ No newline at end of file

public/resource/js/watch_shop.js

@@ -211,14 +211,7 @@ define (['doT', 'text!temp/watch_template_tpl.html', 'css!style/home.css','pagin
                     $ ("#sublet_list").html (doTtmpl (data.data.list));
 
                     /*分页代码*/
-                    $ ("#pagediv").pagination ({
-                        length: data.data.total,
-                        current: pageNo,
-                        every: user.pageSize,
-                        onClick: function (el) {
-                            user.getList (el.num.current);
-                        }
-                    });
+                    add_page(data.data.total,pageNo,user.pageSize,user.getList);
                 }
             });
         },

public/resource/lib/js/Pagination.js

-!function(e,a){"function"==typeof define&&(define.amd||define.cmd)?define(a):e.Pagination=a()}(this,function(){$.fn.pagination=function(a){return $(this).each(function(){$(this).data("pagination")||$(this).data("pagination",new e($(this),a))})};var e=function(e,a){e=e||$(),a=a||{};var t=this,n={length:0,current:1,every:15,mode:"long",onClick:$.noop},i=$.extend({},n,a),r={};this.el=r,r.container=e;var s={};return this.num=s,s.length=i.length,s.current=i.current,s.every=i.every,this.mode=i.mode,this.href=i.href,e.delegate("a","click",function(a){var n=$(this).attr("data-page");t.num.current=1*n;var r,s=this.className;t.show();var o=(r=/prev/.test(s)?e.find(".ui-page-prev"):/next/.test(s)?e.find(".ui-page-next"):e.find(".ui-page-current"))[0];o&&(o.focus(),!1===window.isKeyEvent&&o.blur()),i.onClick.call(o,t,n),/^javascript/.test(this.href)&&a.preventDefault()}),this.show(),this},a='<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M85.876,100.5l49.537-50.526c4.089-4.215,4.089-11.049,0-15.262 c-4.089-4.218-10.719-4.218-14.808,0L63.586,92.868c-4.089,4.215-4.089,11.049,0,15.264l57.018,58.156 c4.089,4.215,10.719,4.215,14.808,0c4.089-4.215,4.089-11.049,0-15.262L85.876,100.5z"/></svg>';return e.prototype.create=function(e,t){var n=(e=e||{}).length||0,i=e.current||1,r=e.every||1;t=t||"long";var s=this.href||"javascript:",o=function(e){return"string"==typeof s?s:"function"==typeof s?s(e):void 0},l="ui-page",c=Math.ceil(n/r)||1,h="",p=[l,"ui-page-prev"].join(" "),u=[l,"ui-page-next"].join(" "),f=[l,"ui-page-ellipsis"].join(" "),g=[l,"ui-page-text"].join(" "),v=[l,"ui-page-current"].join(" ");if(h=i>1?h+'<a href="'+o(i-1)+'" class="'+p+'" data-page="'+(i-1)+'" aria-label="上一页，当前第'+i+'页">'+a+"</a>":h+'<span class="'+p+'">'+a+"</span>","long"==t){var d=function(e){h=e==i?h+'<span class="'+v+'" aria-label="第'+e+"页，共"+c+'页" aria-selected="true" role="option">'+e+"</span>":h+'<a href="'+o(e)+'" class="'+l+'" data-page="'+e+'" aria-label="第'+e+"页，共"+c+'页">'+e+"</a>"};if(c<=6)for(var m=1;m<=c;m++)d(m);else if(i<.5*c&&i<5){if(i<5)for(m=1;m<6;m++)d(m);h=h+'<span class="'+f+'">...</span>',d(c)}else if(i>.5*c&&i>c-6+2)for(d(1),h=h+'<span class="'+f+'">...</span>',m=c-6+2;m<=c;m++)d(m);else d(1),h=h+'<span class="'+f+'">...</span>',d(i-1),d(i),d(i+1),h=h+'<span class="'+f+'">...</span>',d(c)}else"short"==t&&(h=h+'<span class="'+g+'" aria-label="第'+i+"页，共"+c+'页" role="option">'+[i,c].join("/")+"</span>");return'<div class="ui-page-x">'+(h=i<c?h+'<a href="'+o(i+1)+'" class="'+u+'" data-page="'+(i+1)+'" aria-label="下一页，当前第'+i+'页">'+a+"</a>":h+'<span class="'+u+'">'+a+"</span>")+"</div>"},e.prototype.show=function(){var e=this.num;e.length=Math.max(e.length,0),e.every=Math.max(e.every,1);var a=Math.ceil(e.length/e.every);return e.current>a&&(e.current=a),e.current=Math.max(e.current,1),this.el&&this.el.container&&this.el.container.size()&&this.el.container.html(this.create(e,this.mode)),this},e});
\ No newline at end of file
+/**
+ * pagination.js 1.5.1
+ * A jQuery plugin to provide simple yet fully customisable pagination.
+ * @version 1.5.1
+ * @author mss
+ * @url https://github.com/Maxiaoxiang/jQuery-plugins
+ *
+ * @调用方法
+ * $(selector).pagination(option, callback);
+ * -此处callback是初始化调用，option里的callback是点击页码后调用
+ *
+ * -- example --
+ * $(selector).pagination({
+ *     ... // 配置参数
+ *     callback: function(api) {
+ *         console.log('点击页码调用该回调'); //切换页码时执行一次回调
+ *     }
+ * }, function(){
+ *     console.log('初始化'); //插件初始化时调用该方法，比如请求第一次接口来初始化分页配置
+ * });
+ */
+;
+(function (factory) {
+    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
+        // AMD或CMD
+        define(["jquery"], factory);
+    } else if (typeof module === 'object' && module.exports) {
+        // Node/CommonJS
+        module.exports = function (root, jQuery) {
+            if (jQuery === undefined) {
+                if (typeof window !== 'undefined') {
+                    jQuery = require('jquery');
+                } else {
+                    jQuery = require('jquery')(root);
+                }
+            }
+            factory(jQuery);
+            return jQuery;
+        };
+    } else {
+        //Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+    //配置参数
+    var defaults = {
+        totalData: 0, //数据总条数
+        showData: 0, //每页显示的条数
+        pageCount: 9, //总页数,默认为9
+        current: 1, //当前第几页
+        prevCls: 'prev', //上一页class
+        nextCls: 'next', //下一页class
+        prevContent: '<', //上一页内容
+        nextContent: '>', //下一页内容
+        activeCls: 'active', //当前页选中状态
+        coping: false, //首页和尾页
+        isHide: false, //当前页数为0页或者1页时不显示分页
+        homePage: '', //首页节点内容
+        endPage: '', //尾页节点内容
+        keepShowPN: false, //是否一直显示上一页下一页
+        mode: 'unfixed', //分页模式，unfixed：不固定页码数量，fixed：固定页码数量
+        count: 4, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数
+        jump: false, //跳转到指定页数
+        jumpIptCls: 'jump-ipt', //文本框内容
+        jumpBtnCls: 'jump-btn', //跳转按钮
+        jumpBtn: '跳转', //跳转按钮文本
+        callback: function () {} //回调
+    };
+
+    var Pagination = function (element, options) {
+        //全局变量
+        var opts = options, //配置
+            current, //当前页
+            $document = $(document),
+            $obj = $(element); //容器
+
+        /**
+         * 设置总页数
+         * @param {int} page 页码
+         * @return opts.pageCount 总页数配置
+         */
+        this.setPageCount = function (page) {
+            return opts.pageCount = page;
+        };
+
+        /**
+         * 获取总页数
+         * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
+         * @return {int} 总页数
+         */
+        this.getPageCount = function () {
+            return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
+        };
+
+        /**
+         * 获取当前页
+         * @return {int} 当前页码
+         */
+        this.getCurrent = function () {
+            return current;
+        };
+
+        /**
+         * 填充数据
+         * @param {int} 页码
+         */
+        this.filling = function (index) {
+            var html = '';
+            current = parseInt(index) || parseInt(opts.current); //当前页码
+            var pageCount = this.getPageCount(); //获取的总页数
+            switch (opts.mode) { //配置模式
+                case 'fixed': //固定按钮模式
+                    html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
+                    if (opts.coping) {
+                        var home = opts.coping && opts.homePage ? opts.homePage : '1';
+                        html += '<a href="javascript:;" data-page="1">' + home + '</a>';
+                    }
+                    var start = current > opts.count - 1 ? current + opts.count - 1 > pageCount ? current - (opts.count - (pageCount - current)) : current - 2 : 1;
+                    var end = current + opts.count - 1 > pageCount ? pageCount : start + opts.count;
+                    for (; start <= end; start++) {
+                        if (start != current) {
+                            html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
+                        } else {
+                            html += '<span class="' + opts.activeCls + '">' + start + '</span>';
+                        }
+                    }
+                    if (opts.coping) {
+                        var _end = opts.coping && opts.endPage ? opts.endPage : pageCount;
+                        html += '<a href="javascript:;" data-page="' + pageCount + '">' + _end + '</a>';
+                    }
+                    html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
+                    break;
+                case 'unfixed': //不固定按钮模式
+                    if (opts.keepShowPN || current > 1) { //上一页
+                        html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
+                    } else {
+                        if (opts.keepShowPN == false) {
+                            $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
+                        }
+                    }
+                    if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
+                        var home = opts.coping && opts.homePage ? opts.homePage : '1';
+                        html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><span>...</span>' : '';
+                    }
+                    var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
+                    var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
+                    for (; start <= end; start++) {
+                        if (start <= pageCount && start >= 1) {
+                            if (start != current) {
+                                html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
+                            } else {
+                                html += '<span class="' + opts.activeCls + '">' + start + '</span>';
+                            }
+                        }
+                    }
+                    if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
+                        var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
+                        html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
+                    }
+                    if (opts.keepShowPN || current < pageCount) { //下一页
+                        html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>';
+                    } else {
+                        if (opts.keepShowPN == false) {
+                            $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
+                        }
+                    }
+                    break;
+                case 'easy': //简单模式
+                    break;
+                default:
+            }
+            html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
+            $obj.empty().html(html);
+        };
+
+        //绑定事件
+        this.eventBind = function () {
+            var that = this;
+            var pageCount = that.getPageCount(); //总页数
+            var index = 1;
+            $obj.off().on('click', 'a', function () {
+                if ($(this).hasClass(opts.nextCls)) {
+                    if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
+                        $(this).addClass('disabled');
+                        return false;
+                    } else {
+                        index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
+                    }
+                } else if ($(this).hasClass(opts.prevCls)) {
+                    if ($obj.find('.' + opts.activeCls).text() <= 1) {
+                        $(this).addClass('disabled');
+                        return false;
+                    } else {
+                        index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
+                    }
+                } else if ($(this).hasClass(opts.jumpBtnCls)) {
+                    if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
+                        index = parseInt($obj.find('.' + opts.jumpIptCls).val());
+                    } else {
+                        return;
+                    }
+                } else {
+                    index = parseInt($(this).data('page'));
+                }
+                that.filling(index);
+                typeof opts.callback === 'function' && opts.callback(that);
+            });
+            //输入跳转的页码
+            $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
+                var $this = $(this);
+                var val = $this.val();
+                var reg = /[^\d]/g;
+                if (reg.test(val)) $this.val(val.replace(reg, ''));
+                (parseInt(val) > pageCount) && $this.val(pageCount);
+                if (parseInt(val) === 0) $this.val(1); //最小值为1
+            });
+            //回车跳转指定页码
+            $document.keydown(function (e) {
+                if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
+                    var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
+                    that.filling(index);
+                    typeof opts.callback === 'function' && opts.callback(that);
+                }
+            });
+        };
+
+        //初始化
+        this.init = function () {
+            this.filling(opts.current);
+            this.eventBind();
+            if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') {
+                $obj.hide();
+            } else {
+                $obj.show();
+            }
+        };
+        this.init();
+    };
+
+    $.fn.pagination = function (parameter, callback) {
+        if (typeof parameter == 'function') { //重载
+            callback = parameter;
+            parameter = {};
+        } else {
+            parameter = parameter || {};
+            callback = callback || function () {};
+        }
+        var options = $.extend({}, defaults, parameter);
+        return this.each(function () {
+            var pagination = new Pagination(this, options);
+            callback(pagination);
+        });
+    };
+
+}));
\ No newline at end of file

public/resource/lib/js/zw.pagination.js

 /**
  * Created by zw on 2017/12/22.
  */
-var pagination_page_no = 1; //页码
-var pagination_pages = 1; //总页数
-var pagination_totals = 0; //总条数
-var pagination_pagesize = 15; //每页显示多少条
 
-function addpage(methodName) {
-    if (pagination_page_no > pagination_pages) pagination_page_no = pagination_pages;
-    $ (".pageinfo").pagination ({
-        length: data.data.total,
-        current: pageNo,
-        coping:true,
-        every: user.pageSize,
-        onClick: function (el) {
-            user.getList (el.num.current);
+function add_page (total_list, page_no, page_size, methodName) {
+    console.log (total_list - page_size);
+    if (total_list - page_size < 0) {
+        $ ('#pagediv').html ('');
+        return;
     }
-    });
- /*   $('.pageinfo').pagination({
-        pages: pagination_pages, //总页数
-        styleClass: ['pagination-large'],
-        showCtrl: true,
-        displayPage: 6,
-        currentPage: pagination_page_no, //当前页码
-        onSelect: function (num) {
-            pagination_page_no = num;
-            if (typeof methodName === "function") {
-                methodName();
-            }
-        }
-    });*/
-/*
-    $('.pageinfo').find('span:contains(共)').append("(" + pagination_totals + "条记录)");
 
-    var pageselect = '&nbsp;<select class="page_size_select" style="width:80px;">';
-    var pagearr = [15, 30, 50, 100];
-    $.each(pagearr, function () {
-
-        if (this == pagination_pagesize) {
-            pageselect = pageselect + '<option value="' + this + '" selected>' + this + '</option>';
-        } else {
-            pageselect = pageselect + '<option value="' + this + '" >' + this + '</option>';
+    $ ('#pagediv').pagination ({
+        totalData: total_list, /*总条数*/
+        jump: true,
+        current: page_no, /*第几页*/
+        showData: page_size, /*每页显示多少条*/
+        coping: true,
+        homePage: '首页',
+        endPage: '末页',
+        prevContent: '上页',
+        nextContent: '下页',
+        callback: function (api) {
+            //console.log(api.getCurrent())
+            methodName (api.getCurrent ());
         }
     });
-
-    pageselect = pageselect + '</select>&nbsp;';
-    if (!$('.page_size_select').val()) {
-        $('.pageinfo').find('span:contains(共)').prepend(pageselect);
-    }
-
-
-    $('.page_size_select').one('change', function () {
-        pagination_pagesize = $(this).val();
-        methodName();
-    });*/
-
+    var str = '<span style="float: left;min-width: 250px !important;text-align: left !important;">' +
+        '每页显示' + page_size + '条 | 共' + total_list + '条</span>';
+    $ ('#pagediv').append (str);
 
 };
\ No newline at end of file
-