Add ui-bootstrap dependency in plugin

Grafana Plugin Development
1

Hi everyone,

I have developed my own plugin to show a table, now I want to add pagination functionality for this table and plan to leverage “ui.bootstrap.pagination”.

However I got controller not registered error, here is what I have done:

  1. put “ui-bootstrap.js” under “/lib/”
  2. my “pagination_ctrl.js”
import './lib/ui-bootstrap';
angular.module('grafana.controllers',['ui.bootstrap']).controller('PaginationCtrl', ['$scope', function($scope) {
    $scope.maxSize = 5;
    $scope.totalItems = 25;
    $scope.currentPage = 1;
}]);
  1. in my “module.html”
    add ng-controller=“PaginationCtrl” in div and add below
		<uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" first-text="First" previous-text="Previous" next-text="Next" last-text="Last" boundary-links="true" boundary-link-numbers="true">
		</uib-pagination>

Please advise if anything is incorrect or missing, also appreciate if any other suggestion for pagination inside a panel plugin, thanks in advance!

2

I added pagination by plain js script, but still looking forward how to integrate 3rd party library inside panel plugin, appreciate if anyone can advise.