服务器端分页不呈现表格数据

Question

我正在尝试从服务器端进行分页。我的项目技术栈是 MongoDB + Spring + Angular + Angular-datatables。

MongoDB 提供了非常简单的方法来根据分页和排序参数检索数据

此处粘贴了获取数据的 URL，这是一个 'POST' 请求，并且还希望通过请求正文发送一些其他参数

 /myapp/products/filter?pageSize=10&pageNo=1

经过一番谷歌搜索并浏览了 jQuery DataTables 手册后，我在angular-datatables 中发现了如何进行此操作。粘贴以下代码：

     vm.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            url : '/myapp-api/products/filter',
            type : 'POST',
            contentType : 'application/json',
            dataType :'json',
            accepts: "application/json",
            headers: {
                Accept: "application/json",
                Authorization : 'Bearer eyJ0eXAiO.eyJpZCI6IjU1OhSbNTdmIoq1Y'
            },
            data:function(d){
                     var pageNo = d.start;
                 var pageSize = d.length;
                     return JSON.stringify( d );
            },
            success:function(response){
                console.log(" ajax > post > success > response > ", response);
                var page = {
                    "draw":1,
                    "data" : response.list,
                    "recordsTotal" :response.list.length,
                    "recordsFiltered" :response.list.length
                };
                return page;
            }
        })
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers');

我能够成功接收响应，但数据表未显示数据。在成功函数回调中，按照数据表网页中提到的格式返回数据。

此外，我还有一些疑问：

1. 我可以使用$http.post 方法从服务器检索数据吗，我知道数据表有一些机制，它在数据表中完成的每个操作上调用 ajax。

2. data: function(){} 以对象格式为我提供了整个数据表列和其他详细信息，使用 JSON.Stringify(data) 作为解决方法。

我的服务器端实现需要 JSON 数据，我只需要几个参数。

这里有没有人使用$http.post 方法完成了实现。当我尝试它时，它给了我错误：

TypeError: 无法读取未定义的属性“aDataSort”

    $scope.dtOptions = DTOptionsBuilder.newOptions()
     .withOption('ajax', function(data, fnCallback, settings) {
            $http.post('/myapp/products/filter?pageNo=1&pageSize=10', {}).then(function(response) {
                  fnCallback(response);
     });      
    })
    .withDataProp('list')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers');

Answer 1

请参阅下面的更正代码。

您没有正确地将 pageNo 和 pageSize 设置为 URL 参数。

另外根据手册，success 方法绝不能被覆盖，因为它正在被 DataTables 内部使用。相反，您可以使用withDataProp 定义一个回调，该回调将在从服务器接收到响应时调用。

请注意，通过服务器端处理，响应中的draw 参数值必须与请求中的draw 参数值匹配。我使用vm 对象在请求和响应之间存储它的值。

另外值得一提的是，您需要使用 DataTables 版本 1.10.6 或更高版本才能使此代码正常工作。

vm.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
       url : '/myapp-api/products/filter',
       type : 'POST',
       contentType : 'application/json',
       dataType : 'json',
       accepts: "application/json",
       headers: {
           Accept: "application/json",
           Authorization : 'Bearer eyJ0eXAiO.eyJpZCI6IjU1OhSbNTdmIoq1Y'
       },
       data: function(d, settings){
           var api = new $.fn.dataTable.Api(settings);

           // Update URL
           api.ajax.url(
              '/myapp-api/products/filter?pageNo=' + d.start + '&pageSize=' + d.length
           );

           // Store "draw" parameter
           vm.dtDraw = d.draw;

           return JSON.stringify(d);
       }
   })
   .withDataProp(function(json){
       console.log(" ajax > post > success > response > ", json);

       // Retrieve "draw" parameter
       json.draw = vm.dtDraw;

       json.recordsTotal = json.list.length;
       json.recordsFiltered = json.list.length;

       return json.list;
   })
   .withOption('processing', true)
   .withOption('serverSide', true)
   .withPaginationType('full_numbers');