Question

我正在使用ASP.NET 4.0开发一个网站。我想要取得＆amp;单击显示按钮时向用户显示6,000条记录我不想使用分页或griview。一个简单的表将完成我所要做的就是尽可能快地显示记录。如果我尝试填写像客户端一样的记录

<html><table id='tbl'></table></html>
<script>
function getDataFromService()
{
    PageMethods.GetData(filltable)
}
function filltable(result){
  for(int i=0;i<=result.length-1;i++)
  {
     var td= $('<td\>').append(result[i]) ;
     var tr=$('<tr\>').append(td);
     $('#tbl').append(tr);
   }
}

这个技巧失败了，因为动态创建6,000行需要时间。我试过虚拟滚动，即只获取100条记录和当用户滚动下一个1000获取但我无法找到实现此目的的正确方法。任何建议，将不胜感激。

Answer 1

没有快速方法来检索和显示网页上的6000条记录。将这么多行渲染到屏幕上需要花费时间。

您有两种选择：

分页
连续滚动

听起来连续滚动模式最适合您。这篇文章讨论了如何使用jQuery实现该技术：

http://www.go4coding.com/post/2011/04/11/Auto-loading-content-on-page-scroll-in-aspnet-using-jquery.aspx

Answer 2

正如其他人所指出的那样，添加6000行总是明显变慢，但是如果你在调用append（）之前用标签的所有html构建一个长字符串，你可以减少 CONSIDERABLY 的时间，并且您不需要使用$（）来构建行，这也非常昂贵。

以下代码可以保存对$.append()和$()的数千次调用，并且可以更快地呈现表格：

function getDataFromService()
{
    PageMethods.GetData(filltable)
}

function filltable(result){
  var html = '';

  for(int i=0;i<=result.length-1;i++)
  {
     html += '<tr><td>' + result[i] + '</td></tr>'         
  }
   $('#tbl').append(html);
}

如何快速显示繁重的数据

2 个答案: