The front end uses the Jquery Datatables plugin, the code is as follows
<table class="display" id="countTable"> <thead> <tr> <th>Interface Type</th> <th>Completion rate</th> <th>Total</th> <th>Success</th> <th>failed</th> <th>Executing</th> <th>Average duration (seconds)</th> </tr> </thead> <tbody> </tbody> </table>
function initCountTable() { var apiNameList = new Array(); for (var i = 0; i < $("#orderTypeSelect option").length; i++) { var optionVal = $("#orderTypeSelect option").eq(i).val(); if (optionVal == "") { continue; } var apiName = optionVal.split("|")[0]; apiNameList.push(apiName); } $('#countTable').DataTable( { "ajax": { url: "/order/queryApiCount.json", data: { apiNameList: apiNameList }, type: "POST" }, "columns": [ { "data": "apiName" }, { "data": "completionRate" }, { "data": "totalCount" }, { "data": "successCount" }, { "data": "failCount" }, { "data": "processingCount"}, { "data": "averageSpendTime"} ], "bPaginate": false,//Whether paginated display "searching": false,//whether to display the search box "order": [[ 1, "desc" ]]//default sort column }); }
The backend uses SpringMVC to receive parameters
@RequestMapping(value = "/order/queryApiCount.json", method = RequestMethod.POST) @ResponseBody public Object queryApiCount(@RequestParam("apiNameList[]") List<String> apiNameList) { Map map = Maps.newHashMap(); DecimalFormat decimalFormat = new DecimalFormat("0.00"); List<OrderCount> orderCountList = Lists.newArrayList(); if (!CollectionUtils.isEmpty(apiNameList)) { //... omit part of the code orderCountList.add(orderCount); } map.put("data", orderCountList); return map; }
data model
@Data public class OrderCount { private String apiName; private String completionRate = ""; private int totalCount; private int successCount; private int oneTimeSuccessCount; private int retrySuccessCount; private int failCount; private int processingCount; private double averageSpendTime; }