基于用户垂直滚动将行添加到HTML表格

我有一个jsp页面，其中包含超过1000个对象的列表。由于我的要求，我必须在没有任何分页的情况下在同一页面上显示所有1000条记录。我有一个JavaScript的方法，将行添加到文档就绪函数的表中。基于用户垂直滚动将行添加到HTML表格

我有2个问题：1）Javascript方法有struts标签来获取标签和列表值，然后它将行添加到HTML表格中。由于所有标签都花费大量时间从服务器解析，因此此方法花费了大量时间。

我想在表格中一次只添加50条记录，然后当用户垂直向下滚动时，我想以某种方式检测到用户已到达最后，以便我可以在表中添加下50行。因为我已经有了所有的记录，所以我不必去数据库取下一行。

PS：我所有的1000条记录都来自单个表格，我可以在任何时候读取它们。只有在为这些记录进行渲染时才会出现问题。

2016-04-29 Ishan Rastogi

首先，在document.ready()调用页面上只加载50个entiries。

使用jQuery的.scroll()方法触发事件，以便在用户击中表的末尾时追加50个更多的条目。

$('#table').scroll(function() { 
    if($('#table').scrollTop() + $('#table').height() == $('table').height()) { 
    for(var i = 0; i <= 50; i++) { 
     //Append next value in your array to bottom 
    } 
    } 
});

来源

2016-04-29 08:58:00

谢谢，这是解决我的第二个问题。但我仍然不确定第一个。即使我没有调用这个javascript方法，它仍然需要很长时间来渲染页面，但是如果我删除了该方法的代码，那么页面渲染速度非常快。 –

你可以发布你正在使用的当前代码吗？ HTML JS –

基于用户垂直滚动将行添加到HTML表格

回答

相关问题