Как настроить кнопки разбиения на страницы jQuery DataTable и заполнить несколькими вызовами службы

Question

Я заполняю таблицу данных jQuery списком объектов, который извлекаю из REST API.Так что я связываю это с атрибутом модели и перехожу к представлению.Поэтому записи заносятся в таблицу.Но проблема в том, что конкретный API возвращает только 10 записей одновременно.Так что в моем методе обслуживания я только 10 записей.Поэтому, как только таблица данных загружена, мне нужно сделать еще один вызов службы и получить остальные записи, как только следующая кнопка будет нажата в таблице.Как я могу добиться этого с помощью сервисов и контроллеров?Есть ли лучший способ сделать это, возможно, с помощью AJAX?

Контроллер:

@Autowired
private PoyntApiClient poyntApiClient;

@RequestMapping(value = "/businessDetails/{businessId}/poynt", method = RequestMethod.GET)
public String viewBusinessDetails(Model model, @PathVariable String businessId) throws IOException {

      PoyntBusinessDetails poyntBusinessDetails = new PoyntBusinessDetails();
      poyntBusinessDetails = poyntApiClient.getPoyntBusinessDetails( businessId);
      model.addAttribute("poyntBusinessDetails", poyntBusinessDetails);

    return POYNT_DETAILS_VIEW;
}

Вид:

<table id="poyntSubcriptionsTable" class="table table-bordered table-striped dataTable">
       <thead>
          <tr>
             <th>Business ID</th>
             <th>Plan Created Date</th>
             <th>Payment Status</th>
             <th>Subscription Phase</th>
             <th>Plan Name</th>
             <th>Status</th>
          </tr>
       </thead>
       <tbody>
         <c:forEach items="${subscriptions}" var="item">
             <tr>
               <td>${item.businessId}</td>
               <td>${item.createdDate}</td>
               <td>${item.paymentStatus}</td>
               <td>${item.phase}</td>
               <td>${item.planName}</td>
               <td>${item.status}</td>                    
             </tr>
          </c:forEach>
        </tbody>
      </table>

<script type="text/javascript">
  $(document).ready(function () {
    $('#poyntSubcriptionsTable').DataTable({})
   });
</script>

Answer 1

Вам необходимо изменить внешний интерфейс В соответствии со следующим фрагментом кода.

$('#poyntSubcriptionsTable').DataTable({
            "serverSide": true,
            "processing": true,
            "searchDelay": 1000,
            "ajax": "your-controller/search?action=filterByState&status=" + filterStatus,
            "columns": [
                {"data": "id"},
                {"data": "title"}, 
            ],
            "pageLength": 25
        });

На стороне внутреннего интерфейса вы получите следующие параметры GET и сможете использовать их в соответствии со своими требованиями.

$_GET["start"] - Starting raw number. 
$_GET["length"] - Number of rows to fetch once 
$_GET["draw"] - Draw is a unique identifier for request and response (When ajax request send to do a searching it sends draw value as 1, when composing the search result response draw is set to 1 and re-send)

(Предположим, вы установили длину равной 10, и при первой загрузке вы получите от 1 до 10 записей в качестве первой страницы. Как только вы щелкнете по странице 2, будут получены строки с 11 по 20.)

Ваш сервер JSON ответа должен быть следующим:

{
   "data":[
      {
         "id":29629,
         "title":"fghfgh",
         "status":"PUBLISHED",
         "categories":"Accounting Software",
         "ext_ref_id":null,
         "created_time":"2018-08-06 11:45:18"
      },
      {
         "id":29628,
         "title":"hhh",
         "status":"PUBLISHED",
         "categories":"Bakers Supplies",
         "ext_ref_id":null,
         "created_time":"2018-08-06 09:26:24"
      }
   ],
   "recordsTotal":"29646",
   "recordsFiltered":"29646",
   "draw":1
}