jquery的表格分页

最新推荐文章于 2022-10-13 11:13:24 发布

cdcdhj

最新推荐文章于 2022-10-13 11:13:24 发布

阅读量1.5k

点赞数 2

分类专栏： jquery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/cdcdhj/article/details/121310165

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script>
		$(function(){
			var $table=$("table"),
			currentPage=0;
			var pageSize=2;
			$table.bind('paging',function(){
				//隐藏所有的行，取出当前页的行显示
				$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
			});
			var sumRows=$table.find('tbody tr').length;  //记录总行数
			var sumPages=Math.ceil(sumRows/pageSize);
			var $pager=$("<div class='page'></div>");  //分页div
			for(var pageindex=0;pageindex<sumPages;pageindex++){
				//为页标签加上链接
				$('<a href="#"><span>'+(pageindex+1)+'</span></a>').bind('click',{"newpage":pageindex},function(event){
					currentPage=event.data["newpage"];
					$table.trigger('paging');
				}).appendTo($pager);
				
				$pager.append(' ');
			}
			$pager.insertAfter($table);
			$table.trigger('paging');
		})
		</script>
		<title></title>
	</head>
	<body>
		<table>
			<thead>
			<th>编号</th><th>语言</th><th>课时</th>
			</thead>
			<tbody>
				<tr>
					<td>c001</td><td>C#</td><td>80</td>
				</tr>
				<tr>
					<td>002</td><td>java</td><td>90</td>
				</tr>
				<tr>
					<td>003</td><td>php</td><td>60</td>
				</tr>
				<tr>
					<td>004</td><td>javascript</td><td>80</td>
				</tr>
				<tr>
					<td>003</td><td>php2</td><td>60</td>
				</tr>
				<tr>
					<td>004</td><td>javascript</td><td>80</td>
				</tr>
				<tr>
					<td>003</td><td>php3</td><td>60</td>
				</tr>
				<tr>
					<td>004</td><td>javascript</td><td>80</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

cdcdhj

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jquery的表格分页

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(function(){ var $table=$("table"), currentPage=0; var
复制链接

扫一扫