分页加批量翻页

o2web/source/o2_core/o2/widget/$Paging/default/css.wcss

@@ -54,7 +54,8 @@
         "float" : "left"
     },
     "pageItem" : {
-        "width": "24px",
+        "padding-left": "5px",
+        "padding-right" : "5px",
         "height": "24px",
         "border": "1px solid #e6e6e6",
         "text-align": "center",
@@ -68,6 +69,38 @@
     "pageItem_over" : {
         "background-color": "#f1f1f1"
     },
+    "preBatchPage" : {
+        "padding-left": "5px",
+        "padding-right" : "5px",
+        "height": "24px",
+        "border": "1px solid #e6e6e6",
+        "text-align": "center",
+        "line-height": "24px",
+        "cursor": "pointer",
+        "float": "left",
+        "margin-right": "10px",
+        "background-color": "#ffffff",
+        "color": "#777777"
+    },
+    "preBatchPage_over" : {
+        "background-color": "#f1f1f1"
+    },
+    "nextBatchPage" : {
+        "padding-left": "5px",
+        "padding-right" : "5px",
+        "height": "24px",
+        "border": "1px solid #e6e6e6",
+        "text-align": "center",
+        "line-height": "24px",
+        "cursor": "pointer",
+        "float": "left",
+        "margin-right": "10px",
+        "background-color": "#ffffff",
+        "color": "#777777"
+    },
+    "nextBatchPage_over" : {
+        "background-color": "#f1f1f1"
+    },
     "currentPage" : {
         "width": "24px",
         "height": "24px",
@@ -86,7 +119,7 @@
         "line-height" : "20px",
         "text-align" : "center",
         "width" : "20px",
-        "margin-left" : "5px",
+        "margin-left" : "10px",
         "border" : "1px solid #ddd"
     },
     "pageJumper_over" : {

o2web/source/o2_core/o2/widget/$Paging/forum/css.wcss

@@ -61,6 +61,42 @@
         "background-color" : "#fff",
         "color" : "#43AAFA"
     },
+    "preBatchPage" : {
+        "float" : "left",
+        "height" : "20px",
+        "min-width" : "16px",
+        "line-height" : "20px",
+        "text-align" : "center",
+        "padding" : "2px 5px",
+        "border" : "1px solid #f3f3f3",
+        "background-color" : "#f3f3f3",
+        "cursor" : "pointer",
+        "color" : "#333",
+        "margin" : "5px"
+    },
+    "preBatchPage_over" : {
+        "border" : "1px solid #43AAFA",
+        "background-color" : "#fff",
+        "color" : "#43AAFA"
+    },
+    "nextBatchPage" : {
+        "float" : "left",
+        "height" : "20px",
+        "min-width" : "16px",
+        "line-height" : "20px",
+        "text-align" : "center",
+        "padding" : "2px 5px",
+        "border" : "1px solid #f3f3f3",
+        "background-color" : "#f3f3f3",
+        "cursor" : "pointer",
+        "color" : "#333",
+        "margin" : "5px"
+    },
+    "nextBatchPage_over" : {
+        "border" : "1px solid #43AAFA",
+        "background-color" : "#fff",
+        "color" : "#43AAFA"
+    },
     "currentPage" : {
         "float" : "left",
         "height" : "20px",
@@ -82,7 +118,7 @@
         "width" : "20px",
         "margin-top" : "5px",
         "margin-bottom" : "5px",
-        "margin-left" : "5px",
+        "margin-left" : "10px",
         "border" : "1px solid #ddd"
     },
     "pageJumper_over" : {

o2web/source/o2_core/o2/widget/Paging.js

@@ -10,13 +10,18 @@ o2.widget.Paging = new Class({
         currentPage: 1,
         itemSize: 0,
         pageSize: 0,
+        hasFirstPage : true,
+        hasLastPage : true,
         hasNextPage: true,
         hasPrevPage: true,
+        hasBatchTuring : true,
         hasTruningBar: true,
         hasJumper: true,
         hiddenWithDisable: false,
         hiddenWithNoItem: true,
         text: {
+            preBatchTuring : "...",
+            nextBatchTuring : "...",
             prePage: "",
             nextPage: "",
             firstPage: "",
@@ -75,12 +80,18 @@ o2.widget.Paging = new Class({
             max = currentPage + halfCount;
         }
 
-        if  (min > 1 || !this.options.hiddenWithDisable )this.createFirst();
+        if( this.options.hasFirstPage && (min > 1 || showWithDisable) ){
+            this.createFirst();
+        }
 
         if (this.options.hasPrevPage && ( currentPage != 1 || showWithDisable ) ){
             this.createPrev();
         }
 
+        if( this.options.hasBatchTuring && ( min > 1 ) ){ //showWithDisable
+            this.createPrevBatch( min );
+        }
+
         if( this.options.hasTruningBar ){
             this.pageTurnContainer = new Element("div", {
                 styles : this.css.pageTurnContainer
@@ -98,15 +109,21 @@ o2.widget.Paging = new Class({
             }
         }
 
-        if (this.options.hasJumper) {
-            this.createPageJumper();
+        if( this.options.hasBatchTuring && ( max < pageSize )){ //showWithDisable
+            this.createNextBatch( max );
         }
 
         if (this.options.hasNextPage && ( currentPage != pageSize || showWithDisable )){
             this.createNext();
         }
 
-        if( max < pageSize || showWithDisable )this.createLast();
+        if(this.options.hasLastPage && ( max < pageSize || showWithDisable ) ){
+            this.createLast();
+        }
+
+        if (this.options.hasJumper) {
+            this.createPageJumper();
+        }
     },
     createFirst : function(){
         var firstPage = this.firstPage = new Element("div.firstPage", {
@@ -194,6 +211,54 @@ o2.widget.Paging = new Class({
         });
         return pageTurnNode;
     },
+    createPrevBatch : function( min ){
+        this.preBatchPage = new Element("div.prePage", {
+            styles: this.css.preBatchPage
+        }).inject(this.node);
+        if (this.options.text.preBatchTuring ) this.preBatchPage.set("text", this.options.text.preBatchTuring);
+        this.preBatchPage.addEvents({
+            "mouseover": function (ev) {
+                ev.target.setStyles(this.css.preBatchPage_over)
+            }.bind(this),
+            "mouseout": function (ev) {
+                ev.target.setStyles(this.css.preBatchPage )
+            }.bind(this),
+            "click": function () {
+                var page;
+                if( this.options.visiblePages % 2 == 1 ){
+                    page = min - Math.ceil( this.options.visiblePages / 2 );
+                }else{
+                    page = min - Math.ceil( this.options.visiblePages / 2 ) - 1;
+                }
+                if( page < 1 )page = 1;
+                this.gotoPage( page );
+            }.bind(this)
+        });
+    },
+    createNextBatch : function( max ){
+        this.nextBatchPage = new Element("div.prePage", {
+            styles: this.css.nextBatchPage
+        }).inject(this.node);
+        if (this.options.text.nextBatchTuring ) this.nextBatchPage.set("text", this.options.text.nextBatchTuring);
+        this.nextBatchPage.addEvents({
+            "mouseover": function (ev) {
+                ev.target.setStyles(this.css.nextBatchPage_over);
+            }.bind(this),
+            "mouseout": function (ev) {
+                ev.target.setStyles(this.css.nextBatchPage );
+            }.bind(this),
+            "click": function () {
+                var page;
+                if( this.options.visiblePages % 2 == 1 ){
+                    page = max + Math.ceil( (this.options.visiblePages) / 2 );
+                }else{
+                    page = max + Math.ceil( (this.options.visiblePages) / 2 ) + 1;
+                }
+                if( page > this.options.pageSize )page = this.options.pageSize;
+                this.gotoPage( page );
+            }.bind(this)
+        });
+    },
     createPageJumper : function(){
         var _self = this;
         var pageJumper = this.pageJumper = new Element("input.pageJumper", {

o2web/source/x_component_query_Query/Viewer.js

@@ -710,7 +710,7 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
         this.viewPageAreaNode.empty();
         this.paging = new o2.widget.Paging(this.viewPageAreaNode, {
             countPerPage: this.json.pageSize || this.options.perPageCount,
-            visiblePages: 10,
+            visiblePages: 6,
             currentPage: this.currentPage,
             itemSize: this.count,
             pageSize: this.pages,
@@ -735,6 +735,9 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
     },
     _initPage: function(){
         this.count = this.bundleItems.length;
+
+        this.json.pageSize = 2;
+
         var i = this.count/this.json.pageSize;
         this.pages = (i.toInt()<i) ? i.toInt()+1 : i;
         this.currentPage = 1;