How to show heavy data quickly
I am developing a website using ASP.NET 4.0. I want to fetch 开发者_如何学Go& show 6,000 records to the user when show button is clicked I dont wanna use neither paging nor griview. A simple table will do what all i have to achieve is to show the records as quicker as possible. If i try to fill records clientside like
<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);
}
}
This trick fails as it takes time to create 6,000 rows dynamically. I tried virtual scrolling i.e Fetch only 100 records & when user scrolls fetch next 1000 but i am not able to find the proper way to achieve this. Any suggestions would be appreciated.
There is no fast way to retrieve and display 6000 records on a web page. It will take time just to render that many rows to the screen.
You have two options:
- Pagination
- Continuous scrolling
It sounds like the continuous scrolling pattern will work best for you. Here's an article that discusses how to implement the technique using jQuery:
http://www.go4coding.com/post/2011/04/11/Auto-loading-content-on-page-scroll-in-aspnet-using-jquery.aspx
As pointed out by others, adding 6000 rows will always be noticeably slow, but you can reduce the time CONSIDERABLY if you build a long string with all the html for the tags before calling append(), and you don't need to use $() to build the rows, that's also very expensive.
The following code saves several thousand calls to $.append() and $() and will render the table quite faster:
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);
}
加载中,请稍侯......
精彩评论