基于Jquery实现表格动态分页实现代码.doc

基于Jquery实现表格动态分页实现代码.doc:..基于Jquery实现表格动态分页实现代码项目屮经常会对表格进行分页,以下运用jquery对用户管理屮的用户表格进行分页。当页面点击分页图标时,程序会自动去后台获取对应页数的记录。关键代码如下:需要引入的css和js文件有:复制代码代码如下:<link rel=”stylesheet” type=ntext/cssHhref=H<%=basePath%>css/theme/default/css/,,x/link><linkID="skin"rel=ustylesheet"type="text/css"href="<%=basePath%>css//><scriptlanguage—javascript"type=Htext/javascript'1src=H<%=basePath%>js/,,x/script>其中jsp页面代码如下:复制代码代码如下:<scriptlanguage="jscript"type="text/javascript">varpagelndex=1;//当前页数$(function(){GetPageCountf);//获取分页数量以及总的记录条数$("#load").hide();//隐藏loading提示$("#template").hide();//隐藏模板ChangeState(Ozl);//设置翻页按钮的初始状态bind();〃绑定第一页的数据〃第一页按钮click事件$("#first").click(function(){pagelndex=1;ChangeState(O,l);bind();});〃上一页按钮click事件$("#previous").click(function(){pagelndex-=1;ChangeState(-l,l);if(pagelndex<=1){pagelndex=1;ChangeState(Oz-l);}bind();});〃下一页按钮click事件$(”#next").click(function(){pagelndex+=1;ChangeState(l,-l);讦(pagelndex>=pageCount){pagelndex=pageCount;ChangeState(-l,O);}bind(pagelndex);});//最后一页按钮click事件$("#last").click(function(){pagelndex=pageCount;ChangeState(lzO);bind(pagelndex);});〃每页显示记录条数select事件$(”#pageSize").change(function(){bind();})});//AJAX方法取得数据并显示到页面上functionbind(){$("#load").show();varpageSize=$(”#pageSize").val();$.ajax({type:"get",//使用get方法访问后台dataType:"json",//返回json格式的数据url:"<%=basePath%>?method=listU