Question

我正在尝试在此链接https://l-lin.github.io/angular-datatables/#/serverSideProcessing

中制作Angularjs Datatable服务器端分页

所以我使用这段代码

    $scope.dtOptions = DTOptionsBuilder.newOptions()
       .withOption('ajax', {
                  dataSrc: function(json) {
                    conole.log(json)
                    json['recordsTotal'] =json.length
                    json['recordsFiltered'] = json.length
                    json['draw']=1
                    conole.log(json)
                    return json;
                  },
              url: 'api/footestrecords',
              type: 'GET'
           })
       .withOption('processing', true)
       .withOption('serverSide', true)
       .withPaginationType('full_numbers');

我在dataSrc参数

中手动添加了recordsTotal，recordsFiltered和row

这是添加recordsTotal，recordsFiltered和row

之前和之后的json数据

添加之前的json数据

[Object, Object, Object, Object, Object, Object, Object, Object,
Object,Object, Object, Object, Object, Object, Object, Object, Object,
Object, Object, Object, Object, Object, Object, Object, Object, Object,
Object, Object]

添加后的json数据

 [Object, Object, Object, Object, Object, Object, Object, Object,
  Object, Object, Object, Object, Object, Object, Object, Object, Object,
  Object, Object, Object, Object, Object, Object, Object, Object, 
  Object,Object, Object, recordsTotal: 28, recordsFiltered: 28, draw: 1]

问题是分页不起作用，数据表显示一页中的所有数据，而当我点击分页按钮时没有动作。

Answer 1

返回的JSON格式应为：

{
    data: [{Object},{Object},{Object},{Object}…]
    draw: "1"
    recordsFiltered: 91
    recordsTotal: 91
}

您可以从此处获得有关Datatables server-side paging, sorting and filtering in angularjs

的完整教程

Answer 2

删除.withDataProp(function(json) { console.log(json); json.recordsTotal = json.response.total; json.recordsFiltered = json.response.total; json.draw = 1; return json.response.data; })并使用此选项：

var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
  var b = this;
  this.heading = 'My Angular Blog';
  this.subheading = 'Made by Anurag';
  this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
  $http({
      method: "GET",
      url: this.baseurl + "all"
    })
    .then(function Success(response) {
      console.log(response);
      this.bpost = response.data.data;
    });

})

根据您的对象更改json.response。

Answer 3

The return data must be list of object ["data"]=[{name:john,id:1},{name:jason,id:2}].

Try
  .withOption('ajax', {
                  dataSrc: function(data) {                 
                   return data.data;
                     }
                  })
Else,
       .withOption('ajax', {
                  "dataSrc": "data"
                  }

Angularjs Datatable服务器端分页

3 个答案: