Jquery Table 分页插件（小插件--自己写的）

css代码： .page a{ text-decoration:none; } .page a span{ padding:4px 16px 4px 16px; border:1px solid #AAAAEE; color: #1155BB; font-size:12px; font-weight:bold; font-family: 'helvetica neue', arial, sans-serif; } .page a span:hover,.click_page{ background:#2266BB; color:#ffffff; }
jquery 代码：

function TablePage(id,size){ var $table = $(id); var currentPage = 0; //当前页 var pageSize = size; //每页行数（不包括表头） $table.bind("repaginate", function() { //console.log($table.find("tbody tr").eq(0)); $table.find("tbody tr").hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show(); $table.find("tbody tr").eq(0).show(); }); var numRows = $table.find("tbody tr").length; //记录宗条数 var numPages = Math.ceil(numRows/pageSize); //总页数 //console.log(numPages); var $pager = $("<div class='page'><a href='javascript:void(0)'><span id='Prev' style='margin-right:4px;'>« Prev</span></a></div>"); //分页div for( var page = 0; page < numPages; page++ ) { //为分页标签加上链接 //if(page==0){$("<a href='javascript:void(0)'><span id='1' class="click_page"></span></a>")} $("<a href='javascript:void(0)'><span id='"+(page+1)+"'>"+ (page+1) +"</span></a>") .bind("click", { "newPage": page }, function(event){ currentPage = event.data["newPage"]; //console.log($(this).children("span")); $(this).children("span").attr("class","click_page"); $(this).children("span").css({"color":"#FFFFFF"}); $(".page a span").not($(this).children("span")).attr("class",""); $(".page a span").not($(this).children("span")).css({"color":"#1155BB"}); $table.trigger("repaginate"); }) .appendTo($pager); $pager.append(" "); } //$table.trigger("repaginate"); var next=$("<a href='javascript:void(0)'><span id='Next'>Next »</span></a>"); $pager.append(next); $pager.insertAfter($table);//分页div插入table $("#1").attr("class","click_page"); $("#1").css({"color":"#FFFFFF"}); $table.trigger("repaginate"); //console.log($("#1")); //$("#1").attr("class","click_page"); //$("#1").css({"background":"#FFFFFF"}); $("#Prev").bind("click",function(){ var prev=Number($(".click_page").text())-2; currentPage=prev; $(this).css({"background":"#000000"}); if(currentPage<0) { $(this).css({"background":"#c0c0c0"}); return; } $("#"+(prev+1)).attr("class","click_page"); $("#"+(prev+1)).css({"color":"#FFFFFF"}); $(".page a span").not($("#"+(prev+1))).attr("class",""); $(".page a span").not($("#"+(prev+1))).css({"color":"#1155BB"}); //console.log(currentPage); $table.trigger("repaginate"); }); $("#Next").bind("click",function(){ var next=$(".click_page").attr("id"); currentPage=Number(next); //console.log($(".click_page").text()); $(this).css({"background":"#FFFFFF"}); if((currentPage+1)>numPages) { $(this).css({"background":"#c0c0c0"}); return; } $("#"+(currentPage+1)).attr("class","click_page"); $("#"+(currentPage+1)).css({"color":"#FFFFFF"}); $(".page a span").not($("#"+(currentPage+1))).attr("class",""); $(".page a span").not($("#"+(currentPage+1))).css({"color":"#1155BB"}); $table.trigger("repaginate"); }); }
调用Table分页方法：TablePage("#TableID",show_page_num); //

例如 在需要分页的Table表格下面调用 这个方法 TablePage("#Table",15) ,就是表示对Id为Table的表格进行分页，每页显示15行。

补充：本人在是Jquery1.4.2的框架下写的。。。。。。。另外没考虑浏览器的兼容，是在chrome下调试的！

截图：