В UI Grid не работает пагинация

Я новичок в UI Grid и Angular JS, я использую UI Grid для отображения данных с разбивкой на страницы, данные привязаны к Grid, но разбивка на страницы не работает, отображаются только значения нумерации по умолчанию, а я инициализирую GridOptions код, который я пытаюсь

function Getdetails(id) {

    var getData = moniterService.getdata(id);

    $scope.gridOptions = {};

    getData.then(function (scdet) {
        $scope.scdata = scdet.data;
        var paginationOptions = {
            pageNumber: 1,
            pageSize: 10,
        };
        $scope.currentPage = 1;
        $scope.pageSize = paginationOptions.pageSize;

        $scope.gridOptions = {
            data:scdet.data,

            columnDefs: [
              { name: 'Route Number', field: 'RouteNumber' },
              {
                  name: 'Load Ready', field: 'LoadReady', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              },
              {
                  name: 'Start of Day', field: 'SOD', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              },
              {
                  name: 'End of Day', field: 'EOD', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              },
              {
                  name: 'Cut off', field: 'Cutoff', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              },
              {
                  name: 'Settlement', field: 'Settlement', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              },
              {
                  name: 'Closed', field: 'Closed', cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                      if (grid.getCellValue(row, col) === 'Yes') {
                          return 'white';
                      } else if (grid.getCellValue(row, col) === 'No') {
                          return 'red';
                      }
                  }
              }
            ]

        };

        $scope.gridOptions.onRegisterApi = function (gridApi) {
            $scope.gridApi = gridApi;
        };
        $scope.gridApi.grid.refresh();

        $scope.languages = i18nService.getAllLangs();
        $scope.currentLanguage = i18nService.getCurrentLang();
        alert($scope.currentLanguage);
        $scope.changeLanguage = function () {
            i18nService.setCurrentLang($scope.currentLanguage);
        };


    }, function (){
        alert('Error in getting records');
    });

}

Всем привет,

я нашел решение вместо инициализации gridoptions как $scope.gridOptions = {}; я инициализировал как ниже

 $scope.gridOptions = {
        paginationPageSizes: [10,25, 50, 75],
        paginationPageSize: 10,
        enableHorizontalScrollbar: false,
        enableVerticalScrollbar:false
    };

Это сработало

0 ответов

Другие вопросы по тегам