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

Question

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

一旦我进入 JS，我将使用 for 循环来填充我的数组，然后我将其用作数据表的“数据”。我的理解是，使用 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 响应中返回该对象以填充表格。

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

如果您从服务器分节返回数据，您的响应将更改为

{
"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>
]
}

（您必须在 param 值上添加一些范围/值检查）