pagination feature add

Author: nikitaeverywhere

example/index.html

@@ -102,11 +102,12 @@
                 // if cellDrillThrough callback returns boolean false, DrillThrough won't be performed.
                 //, cellDrillThrough: function ({Object { event: {event}, filters: {string[]} }}) {}
             }
+            , pagination: 30 // Enables pagination. Pass a number of lines to show by page.
             //, hideButtons: true // hides "back" and "drillThrough" buttons
             //, triggerEvent: "touchstart" // all "click" events will be replaced by this event
             //, caption: "My table" // if set, table basic caption will be replaced by this text
             , showSummary: true // show summary by columns
-            , enableHeadersScrolling: true // enable scrolling both for table and headers
+            //, enableHeadersScrolling: true // enable scrolling both for table and headers
             //, loadingMessageHTML: "LOADING DATA..." // HTML displaying during data load
             //, conditionalFormattingOn: true // enable conditional formatting rules
             //, defaultFilterSpecs: ["[Date].[H1].[month].&[]"] ] // default filters array

package.json

@@ -1,7 +1,7 @@
 {
   "name": "LightPivotTable",
   "author": "ZitRo",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {

readme.md

@@ -52,6 +52,7 @@ var setup = { // Object that contain settings. Any setting may be missed.
             // if cellDrillThrough callback returns boolean false, DrillThrough won't be performed.
             , cellDrillThrough: function ({Object { event: {event}, filters: {string[]}, cellData: {object} }}) {}
         } ]
+        [ , pagination: 30 ] // Enables pagination. Pass a number of lines to show by page.
         [ , hideButtons: true ] // hides "back" and "drillThrough" buttons
         [ , triggerEvent: "touchstart" ] // all "click" events will be replaced by this event
         [ , caption: "My table" ] // if set, table basic caption will be replaced by this text
@@ -107,5 +108,4 @@ Also anytime you can build project and then check <code>build/example/index.html
 ## Preview
 
 Run <code>gulp</code> command and then check <code>build/WEBModule/index.html</code>.
-
-![Light pivot table](https://cloud.githubusercontent.com/assets/4989256/5570072/4c3a161e-8f84-11e4-929b-6577728df6ba.png)
+![Light pivot table](https://cloud.githubusercontent.com/assets/4989256/5821832/b73c880c-a0d7-11e4-8458-832329b1c48a.png)

source/css/LightPivot.css

@@ -100,6 +100,7 @@
 }
 
 .lpt .lpt-topSection, .lpt .lpt-bottomSection {
+    border-right: 1px solid rgb(208, 208, 208);
     position: relative;
     overflow: hidden;
 }
@@ -174,6 +175,46 @@
     /*border-bottom: none;*/
 }
 
+.lpt .lpt-pageSwitcher {
+    position: absolute;
+    display: table;
+    box-sizing: border-box;
+    bottom: 0;
+    width: 100%;
+    height: 19px;
+    font-size: 14px;
+    border: 1px solid rgb(208, 208, 208);
+    background: #F0F0F0;
+}
+
+.lpt .lpt-pageSwitcher > div {
+    position: relative;
+    display: table-cell;
+    vertical-align: middle;
+    height: 100%;
+    text-align: center;
+}
+
+.lpt .lpt-pageSwitcher > div > span:first-child {
+    border-left: 1px solid rgb(208, 208, 208);
+}
+
+.lpt .lpt-pageSwitcher > div > span {
+    cursor: pointer;
+    padding: 0 5px 0 5px;
+    display: inline-block;
+    min-height: 100%;
+    border-right: 1px solid rgb(208, 208, 208);
+}
+
+.lpt .lpt-pageSwitcher > div > span:hover {
+    background: #FFF7D7;
+}
+
+.lpt-active {
+    background: #FFF7D7;
+}
+
 /*.lpt .lpt-leftHeader table {*/
     /*margin-bottom: 10em;*/
 /*}*/
@@ -254,6 +295,10 @@
     animation-delay: -0.4s;
 }
 
+::-webkit-scrollbar-corner {
+    background-color: #F0F0F0;
+}
+
 @-webkit-keyframes lpt-stretch {
     0%, 40%, 100% {
         -webkit-transform: scaleY(0.4);

source/js/LightPivotTable.js

@@ -171,7 +171,7 @@ LightPivotTable.prototype.popDataSource = function (popData) {
  */
 LightPivotTable.prototype.dataIsChanged = function () {
 
-    this.pivotView.renderRawData(this.dataController.getData());
+    this.pivotView.dataChanged(this.dataController.getData());
 
 };
 

source/js/PivotView.js

@@ -26,6 +26,16 @@ var PivotView = function (controller, container) {
         messageElement: undefined
     };
 
+    /**
+     * Pagination object.
+     * @see pushTable
+     * @type {{on: boolean, page: number, pages: number, rows: number}}
+     */
+    this.pagination = null;
+
+    this.PAGINATION_BLOCK_HEIGHT = 20;
+    this.ANIMATION_TIMEOUT = 500;
+
     this.controller = controller;
 
     this.SCROLLBAR_WIDTH = (function () {
@@ -116,18 +126,27 @@ PivotView.prototype.getCurrentTableData = function () {
 PivotView.prototype.pushTable = function (opts) {
 
     var _ = this,
+        pg,
         tableElement = document.createElement("div");
 
     tableElement.className = "tableContainer";
     if (this.tablesStack.length) tableElement.style.left = "100%";
 
     this.tablesStack.push({
         element: tableElement,
-        opts: opts || {}
+        opts: opts || {},
+        pagination: pg = { // defaults copied to pushTable
+            on: false,
+            rows: Infinity, // rows by page including (headers + summary + rows from config)
+            page: 0, // current page,
+            pages: 0 // available pages
+        }
     });
 
     this.elements.base.appendChild(tableElement);
     this.elements.tableContainer = tableElement;
+    console.log("pagination changed to ", pg);
+    this.pagination = pg;
 
     setTimeout(function () {
         _._updateTablesPosition();
@@ -141,14 +160,38 @@ PivotView.prototype.popTable = function () {
 
     this._updateTablesPosition(1);
     var garbage = this.tablesStack.pop();
+    this.pagination = this.tablesStack[this.tablesStack.length - 1].pagination;
 
     setTimeout(function () {
         garbage.element.parentNode.removeChild(garbage.element);
-    }, 500);
+    }, this.ANIMATION_TIMEOUT);
     this.elements.tableContainer = this.tablesStack[this.tablesStack.length - 1].element;
 
 };
 
+/**
+ * Data change handler.
+ *
+ * @param data
+ */
+PivotView.prototype.dataChanged = function (data) {
+
+    var dataRows =
+            data.rawData.length - data.info.topHeaderRowsNumber;// - (data.info.SUMMARY_SHOWN ? 1 : 0);
+
+    if (this.controller.CONFIG.pagination) this.pagination.on = true;
+    this.pagination.rows = this.controller.CONFIG.pagination || Infinity;
+        //? this.controller.CONFIG.pagination
+            //+ data.info.topHeaderRowsNumber + (data.info.SUMMARY_SHOWN ? 1 : 0)
+        //: Infinity;
+    this.pagination.page = 0;
+    this.pagination.pages = Math.ceil(dataRows / this.pagination.rows);
+    if (this.pagination.pages < 2) this.pagination.on = false;
+
+    this.renderRawData(data);
+
+};
+
 PivotView.prototype._columnClickHandler = function (columnIndex) {
 
     this.controller.dataController.sortByColumn(columnIndex);
@@ -161,6 +204,13 @@ PivotView.prototype._rowClickHandler = function (rowIndex, cellData) {
 
 };
 
+PivotView.prototype._pageSwitcherHandler = function (pageIndex) {
+
+    this.pagination.page = pageIndex;
+    this.renderRawData(this.controller.dataController.getData());
+
+};
+
 PivotView.prototype._backClickHandler = function (event) {
 
     if (event) {
@@ -383,12 +433,13 @@ PivotView.prototype.recalculateSizes = function (container) {
             lTableHead.removeChild(lTableHead.lastChild);
         }
 
-        var headerW = leftHeader.offsetWidth,
+        var pagedHeight = this.pagination.on ? this.PAGINATION_BLOCK_HEIGHT : 0,
+            headerW = leftHeader.offsetWidth,
             headerH = topHeader.offsetHeight,
             containerHeight = container.offsetHeight,
             mainHeaderWidth = headerContainer.offsetWidth,
-            hasVerticalScrollBar = tableBlock.scrollHeight > containerHeight - headerH,
-            addExtraLeftHeaderCell = lTableHead.offsetHeight > containerHeight - headerH
+            hasVerticalScrollBar = tableBlock.scrollHeight > containerHeight - headerH - pagedHeight,
+            addExtraLeftHeaderCell = lTableHead.offsetHeight > containerHeight - headerH - pagedHeight
                 && this.SCROLLBAR_WIDTH > 0,
             cell, tr, cellWidths = [], columnHeights = [], i;
 
@@ -416,10 +467,10 @@ PivotView.prototype.recalculateSizes = function (container) {
 
         topHeader.style.marginLeft = headerW + "px";
         tableBlock.style.marginLeft = headerW + "px";
-        leftHeader.style.height = containerHeight - headerH + "px";
+        leftHeader.style.height = containerHeight - headerH - pagedHeight + "px";
         leftHeader.style.width = headerW + "px";
         if (mainHeaderWidth > headerW) leftHeader.style.width = mainHeaderWidth + "px";
-        tableBlock.style.height = containerHeight - headerH + "px";
+        tableBlock.style.height = containerHeight - headerH - pagedHeight + "px";
         headerContainer.style.height = headerH + "px";
 
         if (addExtraLeftHeaderCell) {
@@ -436,7 +487,7 @@ PivotView.prototype.recalculateSizes = function (container) {
             leftHeader.className = leftHeader.className.replace(/\sbordered/, "")
                 + " bordered";
             cell.colSpan = lTableHead.childNodes.length;
-            cell.style.height = this.SCROLLBAR_WIDTH + "px";
+            cell.style.height = (this.SCROLLBAR_WIDTH ? this.SCROLLBAR_WIDTH + 1 : 0) + "px";
         }
 
         for (i in tableTr.childNodes) {
@@ -518,7 +569,11 @@ PivotView.prototype.renderRawData = function (data) {
         LHTHead = document.createElement("thead"),
         mainTable = document.createElement("table"),
         mainTBody = document.createElement("tbody"),
-        x, y, tr = null, th, td, primaryColumns = [], primaryRows = [], ratio, cellStyle;
+        pageSwitcher = this.pagination.on ? document.createElement("div") : null,
+        pageNumbers = this.pagination.on ? [] : null,
+        pageSwitcherContainer = pageSwitcher ? document.createElement("div") : null,
+        i, x, y, tr = null, th, td, primaryColumns = [], primaryRows = [], ratio, cellStyle,
+        tempI, tempJ;
 
     // clean previous content
     this.removeMessage();
@@ -617,13 +672,15 @@ PivotView.prototype.renderRawData = function (data) {
     renderHeader(
         0,
         info.leftHeaderColumnsNumber,
-        info.topHeaderRowsNumber,
-        rawData.length,
+        tempI = info.topHeaderRowsNumber + (this.pagination.page*this.pagination.rows || 0),
+        tempJ = this.pagination.on
+            ? Math.min(tempI + this.pagination.rows, rawData.length)
+            : rawData.length,
         LHTHead
     );
 
     // render table
-    for (y = info.topHeaderRowsNumber; y < rawData.length; y++) {
+    for (y = tempI/*info.topHeaderRowsNumber*/; y < tempJ/*rawData.length*/; y++) {
         tr = document.createElement("tr");
         for (x = info.leftHeaderColumnsNumber; x < rawData[0].length; x++) {
 
@@ -727,6 +784,39 @@ PivotView.prototype.renderRawData = function (data) {
     pivotBottomSection.appendChild(tableBlock);
     container.appendChild(pivotTopSection);
     container.appendChild(pivotBottomSection);
+    if (pageSwitcher) {
+        pageSwitcher.className = "lpt-pageSwitcher";
+        pageNumbers = (function getPageNumbersArray (currentPage, pages) { // minPage = 1
+
+            var step = 0,
+                pagesArr = [currentPage];
+            while (currentPage > 1) {
+                currentPage = Math.max(1, currentPage - (step || 1));
+                pagesArr.unshift(currentPage);
+                step = step*step + 1;
+            }
+            step = 0;
+            currentPage = pagesArr[pagesArr.length - 1];
+            while (currentPage < pages) {
+                currentPage = Math.min(pages, currentPage + (step || 1));
+                pagesArr.push(currentPage);
+                step = step*step + 1;
+            }
+            return pagesArr;
+
+        })(this.pagination.page + 1, this.pagination.pages);
+        for (i in pageNumbers) {
+            td = document.createElement("span");
+            if (pageNumbers[i] === this.pagination.page + 1) { td.className = "lpt-active"; }
+            td.textContent = pageNumbers[i];
+            (function (page) {td.addEventListener(CLICK_EVENT, function () { // add handler
+                _._pageSwitcherHandler.call(_, page - 1);
+            })})(pageNumbers[i]);
+            pageSwitcherContainer.appendChild(td);
+        }
+        pageSwitcher.appendChild(pageSwitcherContainer);
+        container.appendChild(pageSwitcher);
+    }
     container["_primaryColumns"] = primaryColumns;
     container["_primaryRows"] = primaryRows;