javascript - 单击下一步按钮时服务器连续处理数据表

标签 javascript datatables angular-datatables

我使用数据表在后端处理大数据。在 DTOptionsBuilder 中,我使用 withFnServerData 方法从数据库中获取一系列数据。它从头到尾解析了表中的所有内容。但是下面的分页号总是一个。似乎不起作用,我只能使用左上角的数字过滤器,但这不是我想要的。

Controller

$scope.dtColumns = [
  DTColumnBuilder.newColumn('d', 'column').withOption('defaultContent', ""),
  DTColumnBuilder.newColumn('m', 'mukim').withOption('defaultContent', ""), ....
];

$scope.pageData = {
        total: 0
};

var get = function(sSource, aoData, fnCallback, oSettings){
      var draw = aoData[0].value;
      var order = aoData[2].value;
      var start = aoData[3].value;
      var length = aoData[4].value;

      var params = {
            start:start,
            limit:length
      };

      ValuationService.SearchValuation(params, function(result, response){
        if(result == true){
            var records = {
                    'draw': 0,
                    'recordsTotal': 0,
                    'recordsFiltered': 0,
                    'data': []
            };
            if(response.result){
                  records = {
                    'draw': draw,
                    'recordsTotal': response.total_data,
                    'recordsFiltered':response.result.length,
                    'data': response.result
                };
            }
            $scope.pageData.total = response.total_data;

            fnCallback(records);
        }
      });
}

$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withFnServerData(get) // method name server call
        .withDataProp('data')// parameter name of list use in getLeads Fuction
            .withOption('processing', true) // required
            .withOption('serverSide', true)// required
            .withOption('paging', true)// required
            .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('rowCallback', rowCallback)
         .withDOM('lrtip');

function rowCallback (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $compile(nRow)($scope);
}

HTML

table.row-border.hover(datatable="", dt-instance="dtInstance",dt-columns="dtColumns", dt-options="dtOptions" style="overflow:auto;")

我想要什么

The table below will show the number of pagination. I can click the next and previous. When I click next, it will call the API again to retrieve and parse another start to limit into table.

当前问题

Table pagination shows '1' only, next button disabled. 

I can solve the issue by select the number at top left corner, but it shown in one page which I don't want.

enter image description here

最佳答案

问题出在过滤数据部分,因为我的数据被过滤了,没有显示所有数据。只需更改根据可用总数据过滤的记录即可解决此问题。

records = {
     'draw': draw,
     'recordsTotal': response.total_data,
     'recordsFiltered':response.total_data, // Change total_data
     'data': response.result
};

关于javascript - 单击下一步按钮时服务器连续处理数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46378241/

相关文章:

javascript - 如何通过 URL 将变量传递给数据表搜索字段?

javascript - 如何禁用 Angular 数据表中数据的初始排序?

javascript - ajax表单已提交但没有响应

javascript - 如何在javascript中获取字符串内指定单词的每个索引?

jquery - DataTables - 如何将 id、类和事件附加到 DataTables 中添加的单元格?

javascript - DataTables - stateSaveCallback 和点击激活的其他功能

javascript - 跨不同对象同步画笔

javascript - 使用 Tampermonkey 将使用用户脚本的自定义键盘快捷方式添加到 Chrome

jquery - angularjs数据表无法重新初始化表错误

javascript - Angular 数据表不通过列重新排序进行过滤