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 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 for(var pageindex=0;pageindex<sumPages;pageindex++){ //为页标签加上链接 $(''+(pageindex+1)+'').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>

你可能感兴趣的:(jquery,jquery,前端)