Как отправить номер и длину текущей страницы на сервер - PullRequest
Новая
       24

Как отправить номер и длину текущей страницы на сервер

0 голосов
/ 07 марта 2020

Я следовал документации по DataTable и реализовал, как показано ниже, данные возвращаются, но pagiantion не работает должным образом.

Как получить фактический pageNumber (table.page.info (). page) когда я нажимал на номер страницы в правом нижнем углу dataTable и actula pageSize (table.page.info (). length), когда я изменял длину страницы в левом верхнем углу таблицы данных до ajax вызов.

Пример 1: Когда я нажимаю на номер страницы "1", я получаю - 

Page Number 0 Page Size 10

Но это должно быть 

Page Number 1 Page Size 10

Пример 2: Когда я измените длину страницы "10" на "25", я получаю - 

Page Number 0 Page Size 10

Но это должно быть 

Page Number 0 Page Size 25

Это означает, что я на шаг позади, Пожалуйста, помогите ....

Вот мой html

<table id="allScholarshipResult" class="table table-striped table-bordered" style="width:100%">
        <thead>
        <tr>
            <th>Id</th>
            <th>Scholarship Year</th>
            <th>Scholarship Level</th>
            <th>Total Candidate</th>
            <th>Boy</th>
            <th>Girl</th>
        </tr>
        </thead>

        <tfoot>
        <tr>
            <th>Id</th>
            <th>Scholarship Year</th>
            <th>Scholarship Level</th>
            <th>Total Candidate</th>
            <th>Boy</th>
            <th>Girl</th>
        </tr>
        </tfoot>
    </table>

Вот этот js

    $(document).ready(function() {
       var url = 'all';
   var pageNumber;
   var pageSize;
   var table =  $('#allScholarshipResult').DataTable({
          "processing": true,
          "serverSide": true,
          "paging": true,
          "searching": { "regex": true },
          ajax: function ( data, callback, settings ) {

               $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                         pageNumber: pageNumber,
                         pageSize: pageSize
                    },
                    success: function( response, textStatus, jQxhr ){
                         pageNumber = table.page.info().page;
                         pageSize= table.page.info().length;
                         console.log('Page Number '+pageNumber + ' Page Size ' + pageSize);
                         callback({
                              data: response.responseObject.data,
                              recordsTotal:  response.responseObject.recordsTotal,
                              recordsFiltered:  response.responseObject.recordsFiltered
                         });
                    },
                    error: function( jqXhr, textStatus, errorThrown ){
                    }
               });
          },
          columns: [
               { data: "id" },
               { data: "examYear" },
               { data: "scholarshipLevelId" },
               { data: "candidateTotal" },
               { data: "candidateBoy" },
               { data: "candidateGirl" },
            ]

     });
    } );

Ответ от API 

{
  "recordsTotal": 5,
  "recordsFiltered": 5,
  "data": [
    {
      "id": 76,
      "examYear": 2020,
      "scholarshipLevelId": 1,
      "candidateTotal": 0,
      "candidateBoy": 0,
      "candidateGirl": 0
    },
    {
      "id": 75,
      "examYear": 2020,
      "scholarshipLevelId": 1,
      "candidateTotal": 0,
      "candidateBoy": 0,
      "candidateGirl": 0
    },
    {
      "id": 74,
      "examYear": 2019,
      "scholarshipLevelId": 2,
      "candidateTotal": 0,
      "candidateBoy": 0,
      "candidateGirl": 0
    },
    {
      "id": 73,
      "examYear": 2019,
      "scholarshipLevelId": 1,
      "candidateTotal": 0,
      "candidateBoy": 0,
      "candidateGirl": 0
    },
    {
      "id": 72,
      "examYear": 2020,
      "scholarshipLevelId": 2,
      "candidateTotal": 0,
      "candidateBoy": 0,
      "candidateGirl": 0
    }
  ]
}

1 Ответ

0 голосов
/ 15 марта 2020

Впервые значения pageNumber и pageSize, которые вы получите на сервере, будут undefined . Получив ответ от сервера, вы устанавливаете значение pageNumber и pageSize для номера страницы таблицы, а длина страницы, которая в текущий момент времени будет 0 и 10 соответственно.

Теперь, когда вы нажимаете любую страницу, скажем, 5 , вы получите вместо этого 0 на сервере. из 4 .

Я предложу вам использовать settings объект, который передается в функции ajax: 

$(document).ready(function() {
    var url = 'all';
    var table = $('#allScholarshipResult').DataTable({
      "processing": true,
      "serverSide": true,
      "paging": true,
      "searching": { "regex": true },
      ajax: function (data, callback, settings) {
            var api = new $.fn.dataTable.Api(settings); // <--- create new api object using settings object
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                      pageNumber: api.page(), // <---- get page number
                      pageSize: api.page.len(), //<--- get page length
                },
            });
      },
  });
});
...