我需要显示一个包含大量项目的表格。 所以我想实现,从服务器端延迟加载。 然后,当用户向下(或向上)滚动时,我打电话给服务器以获取下一个/上一个定义的项目数量,并显示它们而不是旧项目(或将它们添加到旧项目中)。 有没有简单的方法来实现呢? 是否有一些JavaScript库可以帮助我实现此功能? 任何帮助将不胜感激。谢谢从服务器端使用js滚动延迟加载表
6
A
回答
1
检查此模板,请按照评论,你将能够编写自己的代码。请记住,这只是一个例子。
var $win = $(window),
$table = $('.table'), // your table
lazyPoint = 0, // point to call next ajax
offset = 30, // number of last table row
count = 30, // number of rows to load with one request
loading = false; // flag to prevent more than 1 loading at a time
// this function will calc next Y coordinate
// then you reach it, use ajax to get some new table data
function calcLazyPoint() {
var top = $table.offset().top;
var height = $table.outerHeight();
lazyPoint = top + height;
}
// add loaded data to table
function addToTable (data) {
var html;
// use some template engine here, like this: http://handlebarsjs.com/
// in this function you should convert raw data
// to HTML, which you will append to table
$table.append(html); // append data to table
offset += 30; // increase your offset
loading = false; // allow to load next data portions
calcLazyPoint(); // calc next lazy point
}
// Function with ajax request
// it will ask server for new data
// using your offset and count
function getTableData() {
$.ajax({
data: {
offset: offset,
count: count
},
success: addToTable
});
}
$win.on("scroll", function() {
var top = $win.scrollTop(); // get scrollTop
var height = $win.innerHeight(); // viewport height
var scrollPoint = top + height;
if (scrollPoint > lazyPoint && !loading) {
getTableData(); // ajax request
loading = true; // prevent more than 1 request
}
});
// fist start
calcLazyPoint();
3
你可以做到这一点使用scrollHeight
,clientHeight
和scrollTop
,检测时滚动条是接近底部区域,那么你取你的新项目:
这是一个例子( the demo):
HTML
<div id="container">
<div id="scrollbox" >
<div id="content" >
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum lorem dolor amet sit</p>
<p>Dolor lorem ipsum amet tis</p>
</div>
</div>
<p><span id="status" ></span></p>
</div>
CSS
#container{
width:400px;
margin:0px auto;
padding:40px 0;
}
#scrollbox{
width:400px;
height:300px;
overflow:auto; overflow-x:hidden;
}
#container > p{
background:#eee;
color:#666;
font-family:Arial, sans-serif; font-size:0.75em;
padding:5px; margin:0;
text-align:rightright;
}
的JavaScript
$('document').ready(function(){
updatestatus();
scrollalert();
});
function updatestatus(){
//Show number of loaded items
var totalItems=$('#content p').length;
$('#status').text('Loaded '+totalItems+' Items');
}
function scrollalert(){
var scrolltop=$('#scrollbox').attr('scrollTop');
var scrollheight=$('#scrollbox').attr('scrollHeight');
var windowheight=$('#scrollbox').attr('clientHeight');
var scrolloffset=20;
if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
{
//fetch new items
$('#status').text('Loading more items...');
$.get('new-items.html', '', function(newitems){
$('#content').append(newitems);
updatestatus();
});
}
setTimeout('scrollalert();', 1500);
}
PS:我从here复制/粘贴代码源。
1
您可以使用jQuery.isInView,这是我的一个库,几乎遵循usage example,它实现了延迟加载。
相关问题
- 1. 数据表延迟加载服务器过滤器延迟
- 2. 服务器端延迟
- 3. jQuery - 延迟加载功能w /滚动
- 4. 执行延迟加载XSJS服务
- 5. 延迟加载不@服务类工作
- 6. 使用Ajax延迟加载
- 7. Auth0服务使用在延迟加载NG2应用
- 8. Azure移动服务延迟
- 9. FLEX中的可滚动延迟加载表
- 10. 如何在Javascript中添加服务器端延迟for循环?
- 11. 使用WCF服务域模型进行延迟加载?
- 12. 加载动画与延迟
- 13. DataGrid延迟滚动
- 14. jQuery如何使用延迟加载滚动加载更多内容
- 15. 延迟加载从XML
- 16. 从SQLite延迟加载
- 17. Silverlight:从nHibernate延迟加载
- 18. 延迟加载
- 19. 延迟加载
- 20. 延迟加载
- 21. 在角JS延迟加载数据
- 22. 延迟js加载的最佳方法?
- 23. 延迟从服务器下载图像凌空
- 24. 延迟加载多个滚动视图和动态图像
- 25. 使用无限滚动+延迟加载加载新内容时向上滚动页面
- 26. 的jquery - 延迟加载 - 设置延迟
- 27. 延迟加载3.2.6
- 28. nhibernate延迟加载
- 29. 延迟加载MirrorType
- 30. RecyclerView延迟加载