Question

我正在用我从REST API提取的对象列表填充jQuery数据表。所以我将其绑定到modelAttribute并传递给视图。因此，记录将填充在表中。但是问题是特定的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
}

如何自定义jQuery DataTable分页按钮并填充几个服务调用

1 个答案: