Question

所以，我正在尝试对从服务中获取的一些数据实施ngGrid数据分页。我得到要显示的表格，搜索过滤器可以正常工作。在我的pagingOptions中，我将pageSize指定为25，但该表显示了我的所有数据。我遇到的另一个问题是，当我点击分页按钮时，页面转动并转到下一个数据，但是当我到达第3/6页左右时，我的数据被删除，分页切换到第3/1页。请帮忙，代码如下：

var drilldownDirective = function() {
    return {
        restrict: 'E',
        scope: {
            tableData: '=',
            numPages: '@'
        },
        controller: function($rootScope, $scope, DashboardFactory) {
            var tableData = $scope.tableData;
            var dashboardreportid = tableData.dashboardreportid;
            var companyid = tableData.companyid;
            var companybrandid = tableData.companybrandid;
            var startdate = tableData.startdate;
            var enddate = tableData.enddate;
            var clientdb = tableData.clientdb;
            var calltype = tableData.calltype;
            var secondarycallval = tableData.secondarycallval;
            $scope.gridData = [];

            var onSuccess = function(response) {
                var d, t, dt, dtobj, obj;
                $scope.repdata = [];
                $scope.titles = [];

                for (d in response.repdata) {
                    var dtArray = {};

                    obj = response.repdata[d];
                    $scope.repdata.push(obj);

                    for (var d in obj.data) {
                        var fieldName = d.split(" ").join("_");
                        var val = obj.data[d];
                        dtArray[fieldName] = val;
                    }

                    //push new created object to gridData array
                    $scope.gridData.push(dtArray);
                }
            };

            var onError = function(response) {
                console.log("error");
                console.log(data);
            };

            DashboardFactory.getDashboardReportData(dashboardreportid, companyid, companybrandid, startdate, enddate, clientdb, calltype, secondarycallval).then(onSuccess, onError);

            //ngGrid options
            $scope.filterOptions = {
                filterText: "",
                useExternalFilter: true
            }; 

            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [10, 25, 50, 100],
                pageSize: 25,
                currentPage: 1
            };  

            $scope.getPagedDataAsync = function (pageSize, page, searchText) {
                setTimeout(function () {    
                    if (searchText) {};
                    $scope.setPagingData($scope.gridData, page, pageSize);
                }, 100);
            };

            $scope.setPagingData = function(data, page, pageSize){ 
                var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
                $scope.gridData = pagedData;
                $scope.totalServerItems = data.length;
                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            };

            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

            $scope.$watch('pagingOptions', function (newVal, oldVal) {
                if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
                }
            }, true);

            $scope.$watch('filterOptions', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
                }
            }, true);                

            $scope.gridOptions = {
                data: 'gridData',
                showFilter: true,
                enablePaging: true,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions,
                plugins: [new ngGridCsvExportPlugin(), new ngGridFlexibleHeightPlugin()],
                showFooter: true,
                jqueryUITheme: true,
                filterOptions: $scope.filterOptions
            };
        },
        templateUrl: "dashboard/drilldownTable.html",
    }
}

Answer 1

如果您发现ngGrid无法正常工作，请尝试使用ngTasty http://zizzamia.com/ng-tasty/#TableServerSide做同样的事情应该更直接，如果您发现问题，我将很乐意为您提供帮助。

AngularJS - ngGrid无法显示正确的页面大小＆amp;分页不起作用

1 个答案: