I'm currently working on implementing ngGrid data pagination for some data retrieved from a service. The table displays correctly and the search filter is functional. However, despite setting the pageSize in my pagingOptions to 25, the table shows all of the data at once. Additionally, when I navigate through the pagination buttons, I encounter an issue where the data disappears around page 3 out of 6 and the pagination display switches to showing page 3 out of 1. I would greatly appreciate any assistance with this, code snippet provided below:
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.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",
}
}