将本地数组加载为 Ajax 文件以提高性能

Question

我正在使用 DataTables 创建 table，但加载速度非常慢。我有大约。需要从 SQL 服务器处理的 9000 条记录（php 不是一个选项）。我正在使用 XML 和 Spring MVC。我正在使用 XML 和 Java 来收集数据并将其放入 HashSet（我也尝试过列表，两者似乎都不比另一个快）。

进入 JS 后，我使用 for 循环来填充我的数组，然后将其用作数据 table 的 "data"。我的理解是使用 serverSide 和 "ajax"（代替数据）会显着加快速度，所以我想知道是否有办法获取我的数组并将它们用作 AJAX。

谢谢。

当前代码：

var InternationalSet = [];
var storeIndex = 0;
<c:forEach items="${InternationalList}" var="entry">
InternationalSet[storeIndex]= ['', "${entry.getStoreId()}","${entry.getOrderPhone()}","${entry.getAddress1()}","${entry.getCity()}","${entry.getState()}", "${entry.getZip()}", "${entry.getMgrName()}", 
  "${entry.getFranchiseeName()}", "${entry.getOrglvl6Descr()}","${entry.getCommDescr()}", "${entry.getOrglvl8Name()}", "${entry.getLatitude()}", "${entry.getLongitude()}"];
 storeIndex++;
</c:forEach>
$('#dataTable').html( '<table cellpadding="0" cellspacing="0" border="0" style="width: 99%; color:black" class="display compact" id="tableOne"></table>' );
var table = $('#tableOne').DataTable( {
  "dom": '<l<t>ip>',
  "deferRender": true,
  "lengthChange": false, 
  "data": InternationalSet,
  "pageLength": 10,
  "orderMulti": false, 
  "columns": [.....

Answer 1

这不是一个完整的答案，但一个快速的改进是将您的列表填充为单个语句而不是 9000。

var InternationalSet = [
<c:forEach items="${InternationalList}" var="e" varStatus="status">
   [ '',
     "${e.getStoreId()}",
     "${e.getOrderPhone()}",
     "${e.getAddress1()}",
     "${e.getCity()}",
     "${e.getState()}", 
     "${e.getZip()}", 
     "${e.getMgrName()}", 
     "${e.getFranchiseeName()}",
     "${e.getOrglvl6Descr()}",
     "${e.getCommDescr()}", 
     "${e.getOrglvl8Name()}",
     "${e.getLatitude()}",
     "${e.getLongitude()}"
  ] <c:if test="${!status.last}">,</c:if>   
</c:forEach>
];

您可以从上面删除一些新行以使其紧凑一些。对脚本的小改动也会构建一个 JSON 对象，您可以在 AJAX 响应中 return 填充 table.

{
"data": [
<c:forEach items="${InternationalList}" var="e" varStatus="status">
....
</c:forEach>
]
}

如果您return从服务器分段读取数据，您的响应将更改为

{
"draw": ${param.draw},
"recordsTotal": ${yourTotal},
"recordsFiltered": ${yourFiltered},
"data": [
<c:forEach items="${InternationalList}" var="e" varStatus="status"
   begin="${param.start}" end="${param.start + param.length}" >
....
</c:forEach>
]
}

（您必须添加一些 range/value 检查 param 值）

将本地数组加载为 Ajax 文件以提高性能

Load local array as Ajax file to improve performance

javascript

ajax

jquery

jstl

datatables