Question

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

在作为表格页脚的图像中，共显示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。

您的recordsFiltered等于10，因此数据表认为服务器端只有10条记录而不需要第二页，因为所有这些记录都已显示在当前页面上。这是个错误。

无法在Angularjs Datatable中进行分页

1 个答案: