Блог

Я заполняю jQuery datatable списком объектов, который я извлекаю из REST API. Итак, я привязываю это к ModelAttribute и передаю в представление. Таким образом, записи заполняются в таблице. Но проблема в том, что конкретный API возвращает только 10 записей одновременно. Итак, в моем методе обслуживания я извлекаю только 10 записей. Итак, как только datatable загружен, мне нужно выполнить еще один вызов службы и получить остальные записи после нажатия кнопки next в таблице. Как я могу добиться этого с помощью служб и контроллеров? Есть ли лучший способ сделать это, возможно, с помощью 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>
  

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

 $('#poyntSubcriptionsTable').DataTable({
            "serverSide": true,
            "processing": true,
            "searchDelay": 1000,
            "ajax": "your-controller/search?action=filterByStateamp;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.)

Из серверной части ваш объект response 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
}