Обработка данных на стороне сервера с помощью поддельной службы данных JSON

Question

В моем угловом приложении я использую datatable, который имеет следующие параметры:

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, и я также прошел официальную обработку примера из serverSide, предоставленную на сайте Datatable, но у меня это не сработало.Нужна помощь.

Answer 1

Я использую 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) {

                }
            });