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

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

另外，我还有更多疑问：

我可以使用$http.post方法从服务器检索数据吗？据我所知，datatables有一些机制可以在数据表中完成的每个动作上调用ajax。
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作为网址参数。

同样根据手册，绝不能覆盖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');

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

1 个答案: