jquery table分页插件
使用方法：
（1）下载jquery.js，现在最新版本为1.3
（2）新建js，我的为page.js，放入以下代码。
jQuery.extend({
page:function(divId,pagesize){
var div=divId;
var x="#"+div+" table tr:has(td)";
var y="#"+div;
var z="#"+div+" table";
var table=$(x);
var row=table.length;
var pageSize=pagesize;
var allPage=parseInt(""+((row+pageSize-1)/pageSize),10);
var currentPage=1;
$(table).hide();
var width=$(z).width();
var max_number=parseInt((width-130)/20,10);
//alert(max_number);
//构建菜单
$(y).append("<div id='menu'></div>");
$(y).css("width",$(z).width()+"px");
$("#menu").css("width",$(z).width()+"px");
$("#menu").css("padding","2px 10px 2px 10px");
$("#menu").css("position","absolute");
showRow("1");
bar();
//为菜单添加事件
function bar(){
var left;
var right;
if(max_number>=allPage){
left=1;
right=allPage;
}
else{
var center=parseInt((max_number+1)/2,10);
if(currentPage<=center){
left=1;
right=max_number;
}
else{
if(allPage%2==1){
center=center-1;
}
var maxRight=currentPage+center-1;
if(maxRight>=allPage){
left=allPage-max_number+1;
right=allPage;
}
else{
if(allPage%2==0){
left=currentPage-center+1;
}
else left=currentPage-center;
right=left+max_number-1;
}
}
}
$("#menu").empty();
$("#menu").append("<span id='pre'>pre</span>"); //上一页
for(var i=left;i<=right;i++){
$("#menu").append("<span id='"+i+"'>"+i+"</span>");
$("span").css("width","20px");
}
$("#menu").append("<span id='next'>next</span>"); //下一页
$("#menu").append("<span id='page_currentPage_allPage'></span>");
$("#next").css("width","30px");
$("#pre").css("width","30px");
$("#page_currentPage_allPage").css("border","solid 1px green");
$("#page_currentPage_allPage").css("width","30px");
$("#page_currentPage_allPage").css("margin","0px 0px 0px 10px");
$("#page_currentPage_allPage").css("padding","0px 2px 0px 2px");
$("#page_currentPage_allPage").html(currentPage+"<b>/</b>"+allPage);
$("span:not('#pre','#next','#page_currentPage_allPage')").bind("click",{}, function (){ showRow($(this).attr("id"));});
$("span:not('#page_currentPage_allPage')").bind("mouseover",{}, function (){ $(this).css("cursor", "hand");});
$("#pre").bind("click",{}, function (){ showPre();});
$("#next").bind("click",{}, function (){ showNext();});
}
function showRow(page){
currentPage=page-0;
$(table).hide();
var first=(currentPage-1)*pageSize;
var last=pageSize*currentPage;
if(last>row) last=row;
for(var i=first;i<last;i++){
table.eq(i).show();
}
bar();
var id="#"+currentPage;
var cd="span:not("+id+")";
$(cd).css("color","#000000");
$(id).css("color","red");
$("#page_currentPage_allPage").html(currentPage+"<b>/</b>"+allPage);
}
function showPre(){
var p;
if(currentPage-0==1){
p=allPage;
}
else {
p=currentPage-1;
}
showRow(p);
}
function showNext(){
var p;
if(currentPage==allPage){
p=1;
}
else {
p=currentPage+1;
}
showRow(p);
}
$("#1").css("color","red"); }
});
（3）
使用方法很简单，页面引用这两个js文件。
然后加入
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
<script language="javascript">
$(document).ready(
function (){
jQuery.page("page",5);
}
);
</script>
jQuery.page("page",5); 为主要使用方法，其中参数“page”为围绕table的div层id，数字5为要每页要显示的输入数。
（4）下面给出的是我的例子，省略（1）（2）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
<script language="javascript">
$(document).ready(
function (){
jQuery.page("page",5);
}
);
</script>
<body>
<div id="page">
<table width="280" border="1">
<tr>
<th width="80">id</th>
<th width="184">name</th>
</tr>
<tr>
<td>1</td>
<td>fds</td>
</tr>
<tr>
<td>2</td>
<td>fsdfsd</td>
</tr>
<tr>
<td>3</td>
<td>fsdfsd</td>
</tr>
<tr>
<td>4</td>
<td>fsdf</td>
</tr>
<tr>
<td>5</td>
<td>sdfds</td>
</tr>
<tr>
<td>6</td>
<td>fsdf</td>
</tr>
<tr>
<td>7</td>
<td>sdfsd</td>
</tr>
<tr>
<td>8</td>
<td>fsdf</td>
</tr>
<tr>
<td>9</td>
<td>sdfsd</td>
</tr>
<tr>
<td>10</td>
<td>fdsf</td>
</tr>
</table>
</div>
</body>
</html>
效果图：
附有一个jquery API.