数据表服务器使用伪造的json数据服务进行侧处理

时间:2019-02-25 12:54:45

标签: angular datatables

在我的有角度的应用程序中,我正在使用具有以下选项的数据表。

options = {
    sDom: 'rt<"bottom"p>',
    pagingType: 'full_numbers',
    ajax: (data, callback, settings) => {
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .subscribe((response : any) => {
          callback({
            data:response
          });
        })
    },
    columns: [
      { data: "userId" },
      { data: "id" },
      { data: "title" },
      { data: "body" }
    ]
  };

返回一个分页表格,每页10行。我想要的是使用此选项进行serverSide处理。当我在选项中附加了serverSide: true之后,processing: true。我的桌子上有分页,但没用。所有结果都显示在单个页面中。对于ajax调用中的回调,我不太清楚,我也经历了Datatable网站中提供的serverSide官方example处理,但对我来说不起作用。需要帮助。

1 个答案:

答案 0 :(得分:0)

我使用的不是jquery,但希望这对您有所帮助。

$('#tblAccounts').DataTable({
                "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
                "paging": true,
                "info": true,
                "ordering": true,
                "search": true,
                "processing": true,
                "serverSide": true,
                "destroy": true,
                "ajax": {
                    "url": "/Home/LoadList",
                    "type": "POST",
                    "data": function (d) {
                        d.startDate = $("#txtStartDate").val();
                        d.endDate = $("#txtEndDate").val();
                        d.head = $("#drpAccountHeads").val();
                    }
                },
                "columns": [
                    { "data": name, "title": "Name", "className": "", "orderable": false, "searchable": false },
                    { "data": plot, "title": "Plot", "className": "", "orderable": false, "searchable": false },
                    { "data": no, "title": "No", "className": "", "orderable": false, "searchable": false }
                ],
                "order": [[0, "asc"]],

                "initComplete": function (settings, json) {

                }
            });