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

基于Jquery实现表格动态分页实现代码 项目中经常会对表格进行分页，以下运用jquery对用户管理中的用户表格进行分页。 当页面点击分页图标时，程序会自动去后台获取对应页数的记录。 关键代码如下： 需要引入的css和js文件有： 复制代码 代码如下: link rel=stylesheet type=text/css href=%=basePath %css/theme/default/css/jpage.css/link link ID=skin rel=stylesheet type=text/css href=%=basePath %css/config.css / script language=javascript type=text/javascript src=%=basePath %js/jquery.js/script 其中jsp页面代码如下： 复制代码 代码如下: script language=jscript type=text/javascript var pageIndex = 1; //当前页数 $(function(){ GetPageCount();//获取分页数量以及总的记录条数 $(#load).hide();//隐藏loading提示 $(#template).hide();//隐藏模板 ChangeState(0,1);//设置翻页按钮的初始状态 bind();//绑定第一页的数据 //第一页按钮click事件 $(#first).click(function(){ pageIndex = 1; ChangeState(0,1); bind(); }); //上一页按钮click事件 $(#previous).click(function(){ pageIndex -= 1; ChangeState(-1,1); if(pageIndex = 1){ pageIndex = 1; ChangeState(0,-1); } bind(); }); //下一页按钮click事件 $(#next).click(function(){ pageIndex += 1; ChangeState(1,-1); if(pageIndex=pageCount) { pageIndex = pageCount; ChangeState(-1,0); } bind(pageIndex); }); //最后一页按钮click事件 $(#last).click(function(){ pageIndex = pageCount; ChangeState(1,0); bind(pageIndex); }); //每页显示记录条数select事件 $(#pageSize).change(function(){ bind(); }) }); //AJAX方法取得数据并显示到页面上 function bind(){ $(#load).show(); var pageSize = $(#pageSize).val(); $.ajax({ type: get,//使用get方法访问后台 dataType: json,//返回json格式的数据 url: %=basePath%actionSmUser.do?method=listUser2,//要访问的后台地址 data: pageIndex= + pageIndex+pageSize=+pageSize,//要发送的数据 complete : function(msg){//msg为返回的数据，在这里做数据绑定 $([id=ready]).remove(); var data = eval((+msg.responseText+)); $.each(data, function(i, n){ var row = $(#template).clone(); row.find(#userId).text(n.userId); row.find(#userName).text(n.userName); row.find(#depId).text(n.depId); row.find(#createTime).text(n.createTime); if(n.createTime !== undefined) row.find(#createTime).text(n.createTime); row.find(#creator).text(n.creator); row.find(#menusId).text(n.menusId