diff --git a/public/app/panels/table/controller.ts b/public/app/panels/table/controller.ts
index cfd2fdf7786..99570d4b6c6 100644
--- a/public/app/panels/table/controller.ts
+++ b/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);
};
diff --git a/public/app/panels/table/editor.html b/public/app/panels/table/editor.html
index 72bc1cf8a1e..aced71a8a98 100644
--- a/public/app/panels/table/editor.html
+++ b/public/app/panels/table/editor.html
@@ -44,7 +44,7 @@
Pagination (Page size)
-
diff --git a/public/app/panels/table/module.ts b/public/app/panels/table/module.ts
index 9ed800f827c..745045c8139 100644
--- a/public/app/panels/table/module.ts
+++ b/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 = $('');
- for (var i = 0; i < pageCount; i++) {
- var pageLinkElem = $('' + (i+1) + '');
+
+ var prevLink = $('«');
+ paginationList.append(prevLink);
+
+ for (var i = startPage; i < endPage; i++) {
+ var activeClass = i === pageIndex ? 'active' : '';
+ var pageLinkElem = $('' + (i+1) + '');
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();
});
}
diff --git a/public/app/panels/table/renderer.ts b/public/app/panels/table/renderer.ts
index fae851e54b5..dd5eb9ed0e1 100644
--- a/public/app/panels/table/renderer.ts
+++ b/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++) {
diff --git a/public/less/panel_table.less b/public/less/panel_table.less
index 58fb6376f5c..7f7512c691a 100644
--- a/public/less/panel_table.less
+++ b/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;