title: How can I dynamically create grid options for multiple tables using ui-grid in angularjs
body: <p>I have written one service for ui-grid table. Now I can use this in only one page but, I want to use this service in multiple pages with different table data. How can I pass grid options and json data for multiple tables. How can I do it? Please help anyone.</p>
  
  <p>Service:</p>
  
  <pre><code>(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;
      //searchResults.loadPOLinesView = loadPOLinesView;
  
      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();  }]);})();
  </code></pre>
  
  <p>View page:</p>
  
  <pre><code>&lt;div ng-controller="SearchResultsController" class="col-md-12"&gt;
  &lt;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"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>