服务器端分页未呈现 table 数据

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');

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

此外，我还有一些疑问：

我可以使用 $http.post 方法从服务器检索数据吗，我知道数据表有一些机制可以在数据表中完成的每个操作上调用 ajax .
data: function(){} 以对象格式提供了整个数据表列和其他详细信息，使用 JSON.Stringify(data) 作为解决方法。

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

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

TypeError: Cannot read property 'aDataSort' of undefined

    $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');

服务器端分页未呈现 table 数据

Server side pagination is not rendering the table data

spring

datatables

mongodb

angularjs