Question

我有一个带有固定标题和可滚动行部分的表。行数据来自后端，它基于用户在提供的搜索框中输入的内容。根据搜索框的输入，表中将填充行。对于前端优化，我想从后端获取所有数据，并仅在视图中显示前10行，而其余数据应在用户在表中向下滚动时显示。

有没有办法实现这样的情况？

Answer 1

因此，只要到达页面末尾，就可以在前端使用类似于无限滚动分页的内容，将API中的数据追加到现有表数据中。只要您到达页面末尾，就会将新数据添加到表中。

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    //Add your data append logic here
  }
};

有帮助吗？

Answer 2

当然有一个场景可以做到这一点。如果datatables.net可以做到，那么您可以编写一个可以执行同样操作的自定义代码。不过，这将需要一些时间和大量测试（尤其是跨浏览器测试）。

首先，您必须从后端（最好是从API）中获取数据，并将其保存为JavaScript可读格式（建议：JSON）。

[
  {
    "name": "John Doe",
    "dob": "01.01.1990",
    "job": "Manager"
  },
  ...
]

然后，您必须编写一个JavaScript函数，该函数可以将对象输出到正确的表行中

对于向下滚动后显示更多内容的部分，您必须编写一个事件侦听器，该事件侦听器可以识别预期的滚动并如上所述启动新的ajax请求

Answer 3

您可以使用AJAX来实现。使用以下示例代码并根据您的要求进行调整：

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>

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);  
}

请检查此以获取更多信息：http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

在表中动态加载数据

3 个答案: