Question

我正在使用配置最少的jquery数据表在我的网站上展示数据。我有1,00,000条记录要显示在数据表中。

当前，数据表花费太多时间来初始化记录。因此系统将转为环聊模式。

我正在从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代码的链接。

如何提高jquery数据表性能，以有效地装载1,00,000条记录的大数据

1 个答案: