feat(tablepanel): paging is starting to work

public/app/panels/table/controller.ts

@@ -42,6 +42,8 @@ export class TablePanelCtrl {
     $scope.refreshData = function(datasource) {
       panelHelper.updateTimeRange($scope);
 
+      $scope.pageIndex = 0;
+
       if ($scope.panel.transform === 'annotations') {
         return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => {
           $scope.dataRaw = annotations;
@@ -79,6 +81,12 @@ export class TablePanelCtrl {
     $scope.render = function() {
       $scope.table = TableModel.transform($scope.dataRaw, $scope.panel);
       $scope.table.sort($scope.panel.sort);
+
+      $scope.pageCount = Math.ceil($scope.table.rows.length / $scope.panel.pageSize);
+      $scope.showPagination = $scope.pageCount > 1;
+      $scope.showPrevPageLink = $scope.pageIndex > 0;
+      $scope.showNextPageLink = $scope.pageIndex < $scope.pageCount;
+
       panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw);
     };
 

public/app/panels/table/editor.html

@@ -44,7 +44,7 @@
 						Pagination (Page size)
 					</li>
 					<li>
-						<input type="text" class="input-small tight-form-input" placeholder="50"
+						<input type="number" class="input-small tight-form-input" placeholder="50"
 						empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>

public/app/panels/table/module.ts

@@ -20,6 +20,7 @@ export function tablePanel() {
       var data;
       var panel = scope.panel;
       var formaters = [];
+      var pageIndex = 0;
 
       function getTableHeight() {
         var panelHeight = scope.height || scope.panel.height || scope.row.height;
@@ -33,7 +34,13 @@ export function tablePanel() {
       function appendTableRows(tbodyElem) {
         var renderer = new TableRenderer(panel, data, scope.dashboard.timezone);
         tbodyElem.empty();
-        tbodyElem.html(renderer.render(0));
+        tbodyElem.html(renderer.render(pageIndex));
+      }
+
+      function switchPage(e) {
+        var el = $(e.currentTarget);
+        pageIndex = (parseInt(el.text(), 10)-1);
+        renderPanel();
       }
 
       function appendPaginationControls(footerElem) {
@@ -44,9 +51,17 @@ export function tablePanel() {
           return;
         }
 
+        var startPage = Math.max(pageIndex - 3, 0);
+        var endPage = Math.min(pageCount, startPage + 9);
+
         var paginationList = $('<ul></ul>');
-        for (var i = 0; i < pageCount; i++) {
-          var pageLinkElem = $('<li><a href="#">' + (i+1) + '</a></li>');
+
+        var prevLink = $('<li><a class="table-panel-page-link pointer">«</a></li>');
+        paginationList.append(prevLink);
+
+        for (var i = startPage; i < endPage; i++) {
+          var activeClass = i === pageIndex ? 'active' : '';
+          var pageLinkElem = $('<li><a class="table-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
           paginationList.append(pageLinkElem);
         }
 
@@ -67,12 +82,20 @@ export function tablePanel() {
         appendPaginationControls(footerElem);
       }
 
+      elem.on('click', '.table-panel-page-link', switchPage);
+
+      scope.$on('$destroy', function() {
+        elem.off('click', '.table-panel-page-link');
+      });
+
       scope.$on('render', function(event, renderData) {
         data = renderData || data;
         if (!data) {
           scope.get_data();
           return;
         }
+
+        pageIndex = 0;
         renderPanel();
       });
     }

public/app/panels/table/renderer.ts

@@ -111,8 +111,8 @@ export class TableRenderer {
   }
 
   render(page) {
-    let endPos = Math.min(this.panel.pageSize, this.table.rows.length);
-    let startPos = 0;
+    let startPos = page * this.panel.pageSize;
+    let endPos = Math.min(startPos + this.panel.pageSize, this.table.rows.length);
     var html = "";
 
     for (var y = startPos; y < endPos; y++) {

public/less/panel_table.less

@@ -18,7 +18,7 @@
 
 .table-panel-footer {
   text-align: center;
-  font-size: 80%;
+  font-size: 90%;
   line-height: 2px;
 
   ul {
@@ -35,6 +35,15 @@
     padding: 4px 12px;
     text-decoration: none;
     border-left-width: 0;
+
+    &:hover {
+      background-color: @grafanaTargetFuncBackground;
+    }
+
+    &.active {
+      font-weight: bold;
+      color: @blue;
+    }
   }
 }
 
@@ -42,10 +51,6 @@
   width: 100%;
   border-collapse: collapse;
 
-  tr {
-    border-bottom: 2px solid @bodyBackground;
-  }
-
   th {
     padding: 0;
 
@@ -57,11 +62,16 @@
   }
 
   td {
-    padding: 10px 0 10px 15px;
+    padding: 6px 0 6px 15px;
+    border-bottom: 2px solid @bodyBackground;
+    border-right: 2px solid @bodyBackground;
 
     &:first-child {
       padding-left: 15px;
     }
+    &:last-child {
+      border-right: none;
+    }
   }
 }
 
@@ -69,7 +79,7 @@
   background: @grafanaListAccent;
   border-top: 2px solid @bodyBackground;
   border-bottom: 2px solid @bodyBackground;
-  height: 30px;
+  height: 32px;
   position: absolute;
   top: 0;
   right: 0;
@@ -77,7 +87,7 @@
 }
 
 .table-panel-table-header-inner {
-  padding: 5px 0 5px 15px;
+  padding: 6px 0 6px 15px;
   text-align: left;
   color: @blue;