向下滚动以加载更多表行
[英]Load more table rows on scroll down
问题描述
今天是个好日子！
我一直在网上寻找如何在向下滚动到底部时加载表中的更多行，但是不幸的是，我只看到divs教程。 谁能启发我如何执行此操作？ 或示例代码或教程？
就像这样，我将运行一个SELECT查询，并将仅在html表中的显示限制为500条记录，但是当用户向下滚动到表的底部时，该记录将在表上加载另外500条记录。 这可能吗？
2 个解决方案
解决方案1
2 2018-03-13 04:43:17
$('#container').on('scroll', function() { if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { alert('end reached'); } });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> #container{ overflow: scroll; max-height: 500px; border: 2px solid; } </style> </head> <body> <div id="container"> <table> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> <tr> <td>hi</td> <td>hello</td> </tr> </table> </div> </body> </html>
上面的代码将检测滚动何时到达表格的末尾。 现在您可以用$.post()或$.ajax()替换alert()以从数据库中获取更多结果， append响应append到表中
解决方案2
1 2018-03-13 04:53:00
$(document).on('click','#load',function(){ $('#loading').append('<tr><td>3:1</td><td>3:2</td><td>3:3</td></tr>'); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="loading"> <tr><td>1:1</td><td>1:2</td><td>1:3</td></tr> <tr><td>2:1</td><td>2:2</td><td>2:3</td></tr> </table> <input type="button" value="click to append" id="load"/>
Zainul描述了有关创建事件处理程序的内容。
这个关于追加到表的答案。
合并这两个答案。
有没有一种方法可以自动向下滚动并加载使用无限滚动的任何网站的更多内容？
[英]Is there a way to auto scroll down and load more content of any website that uses infinite scroll?
当包含在另一个顶部带有 HTML 标签的文件中时，无限滚动不会在向下滚动时加载更多帖子
[英]Infinite Scroll won't load more posts on scroll down when included in another file with HTML tags on top of it
将表格限制为 15 行并单击“加载更多”以在 React JS 中加载更多 15 行
[英]Limit table to 15 rows and click on “Load more” to load more 15 rows in React JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.