如何提高jquery数据表的性能，以高效地加载100000条记录的大数据

Question

我使用最小配置的jquery数据表在我的网站上展示数据。我有100000条记录要显示在数据表中。

当前，数据表初始化记录花费了太多时间。因此系统将进入闲逛模式。

我使用的是来自java端的JSON返回数据。

jquery代码在这里：

$("button#searchbutton").click(function() {                          
var fromDate = $("#fD").val();
var toDate = $("#tD").val();
url = "/Search?fromDate="+fromDate+"&toDate="+toDate;                         
$('#table').DataTable({
"ajax" : url,
"bDestroy":true,
"columns":[
{"data": "txnid" },
{"data": "date"},
{"data": "Amount"}                                        
],
"order": [[ 1, "desc" ]],
"language": {
"lengthMenu": "| View _MENU_ records per page",
"zeroRecords": "Nothing found - sorry",
"infoEmpty": "No records available",
"infoFiltered": "(filtered from _MAX_ total records)"
},
"pagingType": "full_numbers",
"lengthChange": false
});
});

此处的服务器端代码：

SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
@RequestMapping(value = "/Search", produces = "application/json")
public @ResponseBody JSONObject getPendingList(@RequestParam(required = false) String fromDate,
@RequestParam(required = false) String toDate,Model model) throws ParseException 
{           
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
Date fromDate1 = null;
Date toDate1 = null;
if (StringUtils.isEmpty(fromDate)) {
fromDate1 = null;
} else {
fromDate1 = sf.parse(fromDate);
}
if (StringUtils.isEmpty(toDate)) {
toDate1 = null;
} else {
toDate1 = sf.parse(toDate);
}
List<AccountDetails> list2 = service.getList(fromDate1, toDate1);   
JSONObject ajson = null;
if (list2 != null && list2.size() != 0) {
for (AccountDetails deatils : list2) {
Map<String, Object> map = new LinkedHashMap<String, Object>();
map.put("txnid", deatils.getTxnid());
map.put("amount", deatils.getAmount());
if(deatils.getTxnDate() != null){
map.put("date", sf.format(deatils.getTxnDate()));
}else{
map.put("date", "");
}
list.add(map);
}
ajson = new JSONObject();
ajson.put("data", list);
}else {
ajson = new JSONObject();
ajson.put("data", null);
}
}

此处的服务接口：

public List<AccountDetails> getList(fromDate1, toDate1);

此处实现：

@Override
public List<AccountDetails> getList(Date fromDate, Date toDate) {
Session session = entityManager.unwrap(Session.class);
Criteria criteria = session.createCriteria(AccountDetails.class);
System.out.println(fromDate+"********"+toDate);
if (fromDate != null) {
criteria.add(Restrictions.ge("txnDate", fromDate));
}
if (toDate != null) {
criteria.add(Restrictions.le("txnDate", toDate));
}
return criteria.list();
}

你对提高加载时间有什么建议？

Answer 1

在服务器端和数据表上都使用分页。当您点击下一页或某个页码请求时，将转到服务器并返回仅与该页面对应的数据。

浏览器无法同时处理大量数据。最好将数据分块加载并显示在浏览器上。

https://gist.github.com/emrekgn/d67d991f3d1a12f2bd00a12a27140485

您可以参考java代码的链接。