加载本地数组作为阿贾克斯的文件，以提高性能 [英] Load local array as Ajax file to improve performance

问题描述

我使用的数据表创建一个表，但它加载非常缓慢。我约。 9000记录了需要从SQL服务器处理（PHP是不是一个选项）。我使用XML和Spring MVC。我使用的是XML和Java来收集数据，并把它变成一个HashSet的（我曾经尝试列表还，既不显得比其他快）。

在我进入JS我使用一个for循环来填充我的数组，然后我使用的是数据的数据表。我的理解是，使用服务器端和AJAX（替代数据）将加快东西显著所以我想知道是否有办法把我的阵列，并将它们作为AJAX。

感谢。

目前的code：

  VAR InternationalSet = [];
变种storeIndex = 0;
c为C：的forEach项=$ {InternationalList}变种=项＆GT;
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 ++;
＆LT; / C：的forEach＆GT;
$（'＃dataTable的）HTML（'＆LT;表格的cellpadding =0CELLSPACING =0的边界=0的风格=宽度：99％;颜色：黑色类=显示紧凑型ID = tableOne＆GT;＆LT; /表＆gt;'）;
无功表= $（'＃tableOne）。数据表（{
  DOM：＆LT; L＆LT; T＆GT; IP＆GT;'，
  deferRender：真实，
  lengthChange：假的，
  数据：InternationalSet，
  pageLength：10，
  orderMulti：假的，
  列：[.....
 

解决方案

这是不是一个完整的答案，但一个快速的改善来填充你的列表作为一个单独的语句，而不是9000。

  VAR InternationalSet = [
c为C：的forEach项目=$ {InternationalList}VAR =EvarStatus =状态＆GT;
   [''，
     $ {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为C：如果测试=$ {status.last！}＆GT;，＆LT; / C：如果＆GT;
＆LT; / C：的forEach＆GT;
]。
 

您可以删除一些从上面的新生产线，以compactify这一点。稍作修改剧本还建立你可以在一个Ajax响应返回一个JSON对象来填充表。

  {
数据： [
c为C：的forEach项目=$ {InternationalList}VAR =EvarStatus =状态＆GT;
....
＆LT; / C：的forEach＆GT;
]
}
 

如果你正在返回从服务器各部分的数据，你的反应会被更改为

  {
画：$ {param.draw}，
recordsTotal：$ {yourTotal}，
recordsFiltered：$ {yourFiltered}，
数据： [
c为C：的forEach项目=$ {InternationalList}VAR =EvarStatus =身份
   开始=$ {param.start}结束=$ {param.start + param.length}＆GT;
....
＆LT; / C：的forEach＆GT;
]
}
 

（你必须添加一些范围/值检查对参数值）

I am using DataTables to create a table, but it is loading awfully slow. I have approx. 9000 records that need to be processed from an SQL server (php is not an option). I am using XML and Spring MVC. I am using an XML and Java to gather the data and put it into a HashSet (i have tried lists also, neither seem faster than the other).

Once I get into JS I am using a for loop to populate my arrays, then I am using that as the "data" for the data tables. My understanding is that using serverSide and "ajax" (in place of data) will speed things up significantly so I was wondering if there was a way to take my arrays and use them as AJAX.

Thanks.

Current code:

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": [.....

解决方案

This is not a complete answer, but a quick improvement is to populate your list as a single statement instead of 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>
];

You can remove some of the new lines from the above to compactify it a little. Minor changes to the script also builds a single JSON object which you can return in an AJAX response to populate the table.

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

If you are returning the data in sections from the server, your response would be changed to

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

(You will have to add some range/value checking on the param values)

这篇关于加载本地数组作为阿贾克斯的文件，以提高性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！