I have developed a service for ui-grid table functionality. Currently, I am able to use this service on a single page but now I want to extend its usage to multiple pages, each with different table data. How can I pass grid options and JSON data for multiple tables? Any assistance would be greatly appreciated.
Service:
(function(){
"use strict";
angular.module('nApp').controller('SearchResultsController', ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', function ($scope, $http, $timeout, $interval, uiGridConstants, uiGridGroupingConstants) {
var searchResults = this;
searchResults.loadPOHeaderView = loadPOHeaderView;
function loadPOHeaderView() {
if(dataFactory.getSelectedPOHeader().length) {
$state.go("^.poheader");
};
}
$scope.gridOptions = {
enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 10,
useExternalPagination: true,
useExternalSorting: true,
enableRowSelection: false,
enableCellSelection: false,
enableFiltering: false,
enableCellEdit: false,
enableColumnResizing: true,
enableColumnMenus: false,
enableGridMenu: false,
showGridFooter: false,
showColumnFooter: false,
fastWatch: true,
enablePaging: true,
showFilter: true,
rowHeight: 45,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
},
columnDefs : [
{ name:'Test1', displayName:'Test1'},
{ name:'Test2', displayName:'Test2'},
{ name:'Test3', displayName:'Test3'},
{ name:'Test4', displayName:'Test4'},
{ name:'Test5', displayName:'Test5'},
{ name:'Test6', displayName:'Test6'},
{ name:'Test7', displayName:'Test7'}
]
};
var paginationOptions = {
pageNumber: 1,
pageSize: 10,
sort: null
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'common/service/pogriddata.json';
break;
case uiGridConstants.DESC:
url = 'common/service/pogriddata.json';
break;
default:
url = 'common/service/pogriddata.json?page='+paginationOptions.pageNumber;
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 30;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
}); }; getPage(); }]);})();
View page:
<div ng-controller="SearchResultsController" class="col-md-12">
<div ui-grid="gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-move-columns ui-grid-importer ui-grid-exporter ui-grid-pagination class="grid"></div>
</div>