基于Jquery实现表格动态分页实现代码_第1页
基于Jquery实现表格动态分页实现代码_第2页
基于Jquery实现表格动态分页实现代码_第3页
基于Jquery实现表格动态分页实现代码_第4页
基于Jquery实现表格动态分页实现代码_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、基于jquery实现表格动态分页实现代码项目屮经常会对表格进行分页，以下运用jquery对用户管理屮的用户表格进行分页。 当页面点击分页图标时，程序会自动去后台获取对应页数的记录。关键代码如下：需要引入的css和js文件有：复制代码代码如下：<linkrel=”stylesheet”type=ntext/csshhref=h<%=basepath %>css/theme/default/css/jpage.css,x/link><link id="skin" rel=ustylesheet" type="text/css&q

2、uot; href="<%=basepath %>css/config.cssh /><script languagejavascript" type=htext/javascript'1 src=h<%=basepath %>js/jquery.js,x/script>其中jsp页面代码如下：复制代码代码如下：<script language="jscript" type="text/javascript">var pagelndex = 1; /当前页数$(functi

3、on()getpagecountf);/获取分页数量以及总的记录条数$("#load").hide();/隐藏 loading 提示$("#template").hide();/ 隐藏模板changestate(ozl)；/设置翻页按钮的初始状态bind(); 绑定第一页的数据第一页按钮click事件$("#first").click(function()pagelndex = 1;changestate(o,l);bind();)；上一页按钮click事件$("#previous").click(function

4、()pagelndex -= 1;changestate(-l,l);if(pagelndex <= 1)pagelndex = 1;changestate(oz-l)；bind();)；下一页按钮click事件$(”# next").click(function()pagel ndex += 1;changestate(l,-l)；讦(pagelndex>=pagecount)pagelndex = pageco unt;changestate(-l,o);bin d(pagel ndex);)；/最后一页按钮click事件$("#last").cl

5、ick(function()pagelndex = pageco unt;changestate(lzo);bin d(pagel ndex);)；每页显示记录条数select事件$(”# pagesize").change(f un ction()bind();)；/ajax方法取得数据并显示到页面上function bind()$("#load").show();var pagesize = $(”#pagesize").val();$.ajax(type: "get",/使用get方法访问后台datatype: "js

6、on",/返回 json 格式的数据url: "<%=basepath%>actionsmuser.do?method=listuser2",要访问的后台地址 data: "pagelndex=" + pagelndex+"&pagesize="+pagesize,/要发送的数据 complete : function(msg)/msg为返回的数据，在这里做数据绑定 $("id=ready").remove);var data = eval("("+msg.resp

7、onsetext+")'')；$.each(data, functionfi, n)var row = $("#template").clone();row.find("#userld").text(n.userid);row.findf' #username”).text(n.username);row.find("#depld").text(n.depld);row.fi nd(”# createtime").text(n.createtime);if(n.createtime != u

8、ndefined) row.find(”#createtime").text(n.createtime);row.find("#creator").text(n.creator);row.fi nd("#me nusld").text(n.menusld);row.fin d("#isvalid").text(n.isvalid);rowattr(”idtready“);改变绑定好数据的行的idrow.appendto("#datas")；/添加到模板的容器中)；$("id=ready"

9、;).show();setpagelnfo();)；function changedate(date)return date.replace(,-,/7").replace(,-"/7")；设置第几页/共几页的信息function setpagelnfo()var pagecount = $("#pagecount").val();var totalcount = $(h#totalcount").val();var pagesize = $(”#pagesize").val();$("#pageinfo"

10、;).html(” 第 vinput class=*default_pgcurrentpage' id=*pagelndex' type='text' value="'+pagelndex+"* style=*width: 30px' /> 页“ + 7" +“共 n+pagecount+h页“+"检索到"+totalcount+"条记录，显示第 ”+(pagelndex*pagesize-pagesize)+” 条第"+(pagelndex*pagesize)+&quo

11、t;条记录”)；/ajax方法取得分页总数function getpagecount()var pagesize = $(”#pagesize").val();$.ajax(type: "get",datatype: "text",url: "<%=basepath%>actionsmuser.do?method=getpagecount",data: "pagesize="+pagesize,async: false,success: function(msg)var data = eval

12、(,(,+msg+,)")；$("#pagecount").val(data0.pagecount);$("#totalcount").val(data0.totalcount);)；改变翻页按钮状态function changestate(statel,state2)$(“#first“).attr(”class 舄“default_pgfirstdefault_pgbtn“);$(,#previous,).attr("class"/"default_pgprev default_pgbtn");$(&

13、quot;#nexth).attr("class","default_pgnext default_pgbtn"); $("#last").attr("class"/"default_pglastdefault_pgbtn");if(state 1 = 1) document.getelementbyld(,firstn).disabled =docume nt.geteleme ntbyld("previous").disabled =else if(statel = o)

14、document.getelementbyld(nfirst").disabled = "disabled" document.getelementbyld(,previous").disabled = "disabled"$("#first").attr("class"/"default_pgfirstdisabled default_pgbtn");$(h#previous").attr("class"/"default_pgpre

15、vdisabled default_pgbtn"); if(state2 = 1)document.getelementbyld("next").disabled = document.getelementbyld(,last").disabled =else if(state2 = 0)document.getelementbyld("next").disabled = "disabled" document.getelementbyld("last").disabled = "di

16、sabled"$(”#next").attr("class"j'default_pgnextdisabled default_pgbtn");$(,#last,).attr(,class,；,default_pglastdisabled default_pgbtn");</script> html页面代码如下:复制代码代码如下:<body><div><div>bgcolor=h#cccccc"<br/><table id="datas&quo

17、t; align="center" class="listtable" width=*'100%" cellspacing="l" cellpaddin沪t" style二"margintop:5px;"><tr class="fixheader"><th width=n14%">用户 id</th><th width="14%">用户名称v/th><th width=&q

18、uot;14%">所在科室v/th><th width二”14%”创建时间v/th><th width=,14%,*>创建人v/th><th width="14%">菜单集名称v/th><th width="14%">是否有效v/th></tr><trid="template"height="22pxmbgcolor=”#f9fdff'on mouseover=hjavascript:this.style.www

19、.baiyuewang. netbackgro un dcolor=' #ffffcc；returntrue;" onmouseout="javascript:this.style.backgroundcolor=,#f9fdff' return true;"><td id=,userldm class="tdc"></td><td id="username" class="tdc"></td><td id="depld

20、n class="tdc"></td><td id=,createtime,' class=,tdc"></td><td id二”creator” class="tdc"></td><td id="menusld" class="tdc"></td><td id=,isvalid" class=,tdc,></td></tr></table></

21、div><div id="load" style="left: opx; position: absolute; top: opx; background-color: red">loading.</div><div class="default_pgcontainer" ><div class="default_c ontain er"><div class=,default_pgpaner, id="skindiv"><

22、table class="default_pgtoolbar"><tr><td class=mblack_pgcurrentpage"><select id="pagesize" name="pagesizen><option selected="selected,' value="10h>10</option><option value="20h>20</option><option value=&q

23、uot;30">30</option></select></td><td><div id="first" class="default_pgfirst default_pgbtn" /></td><td><div idprevious” class=hdefault_pgprev default_pgbtn“ /></td><td class=,default_separatorh></td><td&g

24、t;<div id=”next" class="default_pgnext default_pgbtn" /></td><td> <div id=nlasth class=hdefault_pglast default_pgbtnh /> </td><td class=,default_separator"></td> <td> <span idpageinfo"x/span></td></tr></tab

25、le></div></div></div></div><div id="test"x/div><input type="hidden" id="pagecount" style="width: 45px" /><input type="hidden" id=,totalcount" style="width: 45px" /> </body>后台action中代码如

26、下:复制代码代码如下：分页获取用户信息public void listuser2(actio nh/lapping mappi ng, actio nf orm form, httpservletrequest request, httpservletresponse response) requesttool tool = new requesttool(request);integer pagesize = tool.getlntparametercpagesize1');integer pagelndex = tool.getlntparameter(hpagelndexh);r

27、esultpage res = servicesmuserlmpl.findaiismusers(pagelndex, pagesize);ust<smuser> smllserlist = (list<smuser>)res.getresult();jsonarray array = new jsonarray();jsonobject object;for(smuser user:smuserlist)object = new jsonobject();object.putcuserld'1, user.getuserld();object.put(,usernameh,user.getusername();object.put(,depld,/ user.getorg

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论