Question

大家好日子！

我一直在网上搜索如何在表格中加载更多行向下滚动到达底部，但不幸的是，我只看到了divs教程。任何人都可以请教我如何执行此操作？或示例代码或教程？

就像这样，我将运行一个SELECT查询并仅在html表中将显示限制为500条记录，但当用户向下滚动到表格的底部时，该记录将加载另外500条记录在桌子上。这可能吗？

Answer 1

$('#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>

上面的代码将检测滚动何时到达表的末尾。现在，您可以将alert()替换为$.post()或$.ajax()，以便从数据库中获取更多结果，并append表中的响应

Answer 2

$(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描述了创建事件处理程序。

关于附加表格的答案。

合并这两个答案。

向下滚动时加载更多表格行

2 个答案: