无法在 Angularjs 数据表中分页

Question

我正在使用 angularjs + datatable plugin。但出于某种原因，它没有给我任何点击下一页的选项（出现在底部的页码 1 2 3 ....）。

在table页脚的图片中，共有22条记录，正在显示10条，但页脚中的后续页面不显示数字2。

控制器代码如下

angular.module('tableTest', ['datatables']).controller('TableCtrl',function ($scope,$compile,DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
     url: '/tableDatalist',
     type: 'GET'
 })
 .withDataProp('data')
    .withOption('serverSide', true)
    .withOption('createdRow', function(row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
    })
    .withOption('responsive', true)
    .withPaginationType('full_numbers');
vm.dtColumns = [
    DTColumnBuilder.newColumn('group').withTitle('Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('startTime').withTitle('Start').withOption('bSortable',true),
    DTColumnBuilder.newColumn('endTime').withTitle('End').withOption('bSortable',true),
    DTColumnBuilder.newColumn('status').withTitle('Status').withOption('bSortable',true),
    DTColumnBuilder.newColumn('reason').withTitle('Reason').withOption('bSortable',true),
    DTColumnBuilder.newColumn('transactionGroup').withTitle('Transaction Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('geoGroup').withTitle('Geo Group').withOption('bSortable',true),
    DTColumnBuilder.newColumn('group').withTitle('Current Status').renderWith(function(data, type, full, meta) {
        var arr = full.endTime.split(/-|\s|:/);
        var endTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
        arr = full.startTime.split(/-|\s|:/);
        var startTime = new Date(arr[0], parseInt(arr[1])-1, arr[2], arr[3], arr[4], arr[5]);
        var currentTime = new Date();
        var color = ['#2196F3','#009688'];
        var currentStatus = ['INACTIVE','ACTIVE']
        var index;
        if(startTime.getTime() <= currentTime.getTime() && currentTime.getTime() <= endTime.getTime()) {
            index = 1;
        } else {
            index = 0;
        }
        return '<span style="background : '+color[index]+';color: #FFF;font-weight: 500;" class="currentStatus"> &nbsp;&nbsp;'+currentStatus[index]+'&nbsp;&nbsp; </span>';
    }).notSortable(),
    DTColumnBuilder.newColumn('code').withTitle('Select').notSortable().renderWith(function(data, type, full, meta) {
        return '<span class="code"> <input type="checkbox" ng-model="_'+data+'" ng-change="toggleExistingTransactionSelection('+data+',_'+data+')"></span>';
    })
]; 
});

以下是HTML:

<div ng-controller="TableCtrl as showCase">
                        <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
                    </div>

服务器端代码：

    @RequestMapping(value = "//tableDatalist", method = RequestMethod.GET, produces = "application/json")
@ResponseBody
public ResponseEntity<String> getTransactionGroupList(HttpServletRequest httpRequest) {
    try {
        // some logic...
        resource.put("data", rows).put("recordsTotal",page.getTotalElements()).put("recordsFiltered", rows.length()).put("draw", httpRequest.getParameter("draw"));
        return new ResponseEntity<String>(resource.toString(), HttpStatus.OK);
    } catch(Exception e) {
        LOG.error("Error while getting allowed resources : ", e);
        ErrorResponse er = new ErrorResponse().serverError().setMsg("........");
        return new ResponseEntity<String>(er.toJson(), HttpStatus.BAD_REQUEST);
    }
}

以下是 link 从服务器发送和接收的内容。

我不明白为什么页脚中没有显示第 2 页。

Answer 1

看到这个answer。

Your recordsFiltered is equal to 10, so datatables think that there are only 10 records on the server side and second page is not needed because all of them are already shown on the current page. This is comon mistake.

无法在 Angularjs 数据表中分页

Not able to paginate in Angularjs Datatable

datatable

angularjs