add paginator

Gruntfile.js

@@ -43,7 +43,7 @@ module.exports = function(grunt) {
             },
 
             "css" : {
-                files: sourceFiles.sass,
+                files: ['style/**/*.scss'],
                 tasks:["sass"]
             },
 

build.json

@@ -36,6 +36,8 @@
     "src/ZeroTable/Plugin/SearchHeader/Searcher.js",
     "src/ZeroTable/Plugin/SearchHeader/String.js",
 
+    "src/ZeroTable/Tools/*",
+
     "src/plugins/*"
 
 

src/ZeroTable.js

@@ -2,4 +2,5 @@ var ZeroTable    = {};
 ZeroTable.Data   = {};
 ZeroTable.Drawer = {};
 ZeroTable.Column = {};
-ZeroTable._plugins = {};
+ZeroTable._plugins = {};
+ZeroTable.Tools = {};

src/ZeroTable/TableInstance.js

@@ -64,12 +64,13 @@ ZeroTable.TableInstance.prototype = {
         var event;
         var tableInstance = this;
 
+        var $table;
         if(!this.$table) {
-            var $table = tableInstance.drawer.drawTable(tableInstance);
+            $table = tableInstance.drawer.drawTable(tableInstance);
             this.$table = $table;
             this.tableEvent("onInitTable", { "$table" : $table });
         } else{
-            var $table = this.$table;
+            $table = this.$table;
             this.tableEvent("onClearTable", { "$table" : $table });
         }
 

src/ZeroTable/Tools/Paginator.js

@@ -0,0 +1,56 @@
+ZeroTable.Tools.Paginator = function(table){
+    this.table = table;
+    this.$item = $('<div class="zt-paginator"></div>');
+
+    var $firstPage = $('<div class="zt-pagi-ico zt-first-page">&lt;&lt;</div>');
+    var $previousPage = $('<div class="zt-pagi-ico zt-previous-page">&lt;</div>');
+    var $pageSelector = $('<div class="zt-page-selector"><input type="text"/></div>');
+    var $totalPages = $('<div class="zt-total-pages"> / <span class="zt-show"></span></div>');
+    var $lastPage = $('<div class="zt-pagi-ico zt-last-page">&gt;&gt;</div>');
+    var $nextPage = $('<div class="zt-pagi-ico zt-previous-page">&gt;</div>');
+
+    this.$item.append($firstPage);
+    this.$item.append($previousPage);
+    this.$item.append($pageSelector);
+    this.$item.append($totalPages);
+    this.$item.append($nextPage);
+    this.$item.append($lastPage);
+
+
+
+    $nextPage.click(function(){
+        table.goToNextPage();
+    });
+    $lastPage.click(function(){
+        table.goToLastPage();
+    });
+    $firstPage.click(function(){
+        table.goToFirstPage();
+    });
+    $previousPage.click(function(){
+        table.goToPreviousPage();
+    });
+
+    $pageSelector.find('input').on('keyup', function(e){
+        if(e.which == 13) {
+            table.setPage($(this).val(), 0);
+        }
+    });
+
+    $pageSelector.find('input').on("click", function () {
+        $(this).select();
+    });
+
+    table.on('dataUpdated', function(e){
+        $totalPages.find('.zt-show').html(table.countPages());
+        $pageSelector.find('input').val(table.currentPage());
+    });
+};
+
+ZeroTable.Tools.Paginator.prototype = {
+
+    draw : function(){
+        return this.$item;
+    }
+
+};

src/plugins/pagination.js

@@ -8,7 +8,7 @@ ZeroTable.createPlugin({
     "init" : null,
     "listen" : {},
     "pluginPrototype" : {},
-    "tableKey" : {
+    "tableKeys" : {
 
         "countPages" : function(){
             var dataConnector = this.dataConnector;
@@ -33,9 +33,11 @@ ZeroTable.createPlugin({
             return Math.ceil(dataConnector.offset/dataConnector.limit) + 1;
         },
 
-        "setPage" : function(page){
+        "setPage" : function(page, delay){
             var dataConnector = this.dataConnector;
 
+
+
             if(!dataConnector.limit){
                 return false;
             }
@@ -49,6 +51,9 @@ ZeroTable.createPlugin({
             }
 
             dataConnector.setOffset(dataConnector.limit * (page - 1));
+
+            delay = delay || 50;
+            dataConnector.update(delay);
         },
 
         "goToLastPage" : function(){

style/style.scss

@@ -248,4 +248,6 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-}
+}
+
+@import "zt-paginator";

style/zt-paginator.scss

@@ -0,0 +1,16 @@
+.zt-paginator{
+
+  font-size: 10px;
+
+  >*{
+    display: inline-block;
+    margin: 0 3px;
+  }
+
+  input{
+    width: 25px;
+    padding: 2px;
+    font-size: 10px;
+    text-align: right;
+  }
+}

tests/table.html

@@ -9,6 +9,9 @@
 </head>
 <body>
 <div id="table" style="height:200px;"></div>
+<div id="tableTools">
+
+</div>
 <script>
     $(function(){
         var config = {
@@ -52,6 +55,9 @@
         var tableInstance = new ZeroTable.TableInstance(config, data, {limit: 3});
         $("#table").append(tableInstance.draw());
 
+        console.log(tableInstance);
+        $("#tableTools").append(new ZeroTable.Tools.Paginator(tableInstance).draw());
+
 
     });
 </script>