jquery做的表格分页功能

1 jquery代码

<mce:script type="text/javascript"><!-- $(function(){ var currentPage = 1; var $page = $(".pagingTest tr[class!='paging']"); var pageArray = new Array(); var maxNum = $page.length; var perNum = 3; var cookie_name = 'currentPage'; $("#page").keyup(function(){ if($("#page").val() != null && $("#page").val() > 0 && $("#page").val() < maxNum){ perNum = $("#page").val(); } var filterString = ""; currentPage = 1; $(".paging span").text(currentPage+"/"+(maxNum%perNum == 0 ? maxNum/perNum : (Math.round(maxNum/perNum)+1))); $.cookie(cookie_name, currentPage); for(var i = 0 ;i<perNum ; i++){ filterString += ":contains(" + $page.eq(($.cookie(cookie_name)-1)*perNum + i).text() +"),"; } $page.hide().filter(filterString).show(); }); $("a").click(function(event){ $(".paging span").text(currentPage); $.cookie(cookie_name, currentPage); var maxPage = maxNum%perNum == 0 ? maxNum/perNum : (Math.round(maxNum/perNum)+1); if($.cookie(cookie_name) == 1){ if($(this).attr("id") == "down"){ currentPage++; $(".paging span").text(currentPage+"/"+maxPage); $.cookie(cookie_name, currentPage); } }else if($.cookie(cookie_name) >= maxPage){ if($(this).attr("id") == "up"){ currentPage--; $(".paging span").text(currentPage+"/"+maxPage); $.cookie(cookie_name, currentPage); } }else{ if($(this).attr("id") == "up"){ currentPage--; $(".paging span").text(currentPage+"/"+maxPage); $.cookie(cookie_name, currentPage); }else{ currentPage++; $(".paging span").text(currentPage+"/"+maxPage); $.cookie(cookie_name, currentPage); } } var filterString = ""; for(var i = 0 ;i<perNum ; i++){ if(($.cookie(cookie_name)-1)*perNum + i < maxNum){ filterString += ":contains(" + $page.eq(($.cookie(cookie_name)-1)*perNum + i).text() +"),"; } } $page.hide().filter(filterString).show(); }); }) // --></mce:script>

 

2 html代码

<div><br/>设定每页显示数目<br/><input id="page" /></div> <table class="mem"> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody class="pagingTest"> <tr><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr><td>找六</td><td>男</td><td>浙江温州</td></tr> <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr> <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr> <tr><td>李四</td><td>男</td><td>湖南长沙</td></tr> <tr class="paging"> <td colspan="3" align="center"> <a href="#" mce_href="#" id="up">上一页</a>  <span>1</span>  <a href="#" mce_href="#" id="down">下一页</a> </td> </tr> </tbody> </table>