jQuery前端分页示例分享

时间：2021-10-13 来源：互联网编辑：宝哥软件园浏览：次

大家在作分页时，多数是在后台返回一个导航条的超文本标记语言字符串，其实在前端用射流研究…也很好实现。

调用寻呼机方法，输入参数，会返回一个导航条的超文本标记语言字符串。方法的内部比较简单。

复制代码代码如下：/***页面大小，每页显示数*页面索引，当前页数*页数总页数*网址连接地址*寻呼机(10,1,5,"索引")使用方法示例*/函数页导航(页面大小、页面索引、页面计数、网址){ var int page=7；//数字显示var intBeginPage=0；//开始的页数var IntendPage=0；//结束的页数var int cross age=parsent(int page/2)；//显示的数字var STr page=' div class=' fr ' span class=' page info '第font color=' # ff 0000 ' '页面索引'/页面计数'/font页每页font color=' # ff 0000 ' '页面大小'/font条/span '；if(page index 1){ Strpage=Strpage ' a class=' PageNav ' href=' URL '？页面索引=1页面大小="页面大小"范围首页/span/a '；strPage=strPage ' a class=' PageNav ' href=' URL '？页面索引='(页面索引- 1)'页面大小='页面大小'范围上一页/span/a '；} if (pageCount intPage) {//总页数大于在页面显示的页数if(页面索引页数-intcrossage){//当前页数总页数-3 intBeginPage=页数-int page 1；intEndPage=页数；} else { if(page index=int page-int cross age){ intBeginPage=1；intEndPage=int page } else { intBeginPage=page index-int crosspage；intEndPage=页面索引intCrossPage} } } else { intBeginPage=1；intEndPage=页数；} if(页数0){ for(var I=IntBeginPage；I=intEndPagei){ { if(I==page index){//当前页strPage=strPage " a class=' current ' href=' JavaScript 3: void(0)；“我/一”；} else { Strpage=Strpage ' a class=' PageNav ' href=' URL '？页面索引=' i '页面大小='页面大小''标题='第我页“我”/一；} } } } if(PageIndex PageCount){ Strpage=Strpage ' a class=' PageNav ' href=' URL '？页面索引='(页面索引1)'页面大小='页面大小'范围下一页/span/a '；strPage=strPage ' a class=' PageNav ' href=' URL '？页面索引='页面计数'页面大小='页面大小'范围尾页/span/a '；}返回strpage '/div '；}

试用这个方法试试

复制代码！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script src=' http : script/Ajax-pager。js '/script script src=' http : script/jquery-1。8 .0 .js '/脚本脚本类型=' text/JavaScript ' $(function(){ loadData(1，10))；//分页条点击事件$(document.body).打开('点击','。pageNav '，function(){ var page size=Number(getQueryString(' page size ')，$(this).attr(' href ')；var页面索引=Number(getQueryString('页面索引')，$(this).attr(' href ')；loadData(页面索引，页面大小);返回false//不跳转页面});});//加载数据函数加载数据(页面索引，页面大小){ $ .getJSON(' Content/customersdata。txt '，{ pageIndex: pageIndex，pageSize: pageSize }，函数（数据){ var beginIndex=(页面索引-1)*页面大小；var endIndex=页面索引*页面大小-1；var tbodyHtml=for(var I=Beginindex；I endindesi){ if(！数据第[I]行){ break} var t body=' trtd { 0 }/tdtd { 1 }/tdtd { 2 }/tdtd { 3 }/tdtd { 4 }/tdtd { 5 }/TD '；t body=' TD { 6 }/tdtd { 7 }/tdtd { 8 }/tdtd { 9 }/tdtd { 10 }/TD/tr '；tbody=tbody.format(数据。行[i].CustomerID，数据。行[i].公司名称，数据。行[i].联系人姓名，数据。行[i].ContactTitle，数据。行[i].地址数据。行[i].城市，数据。行[i].地区？数据。行[i].区域： ' ',数据。行[i].PostalCode，数据。行[i].国家，数据。行[i].电话，数据。行[i].传真？数据。行[i].传真： ' ');tbodyHtml=tbody} $('#tb ').查找(' tbody ').第一个()。html(tbodyHtml)；var pageCount=parseInt(数据合计/页面大小)(数据。总页面大小百分比？1 : 0);$('#dvPager ').html(寻呼机(页面大小，页面索引，页面计数，' customersdata。txt’)；} );} //字符串格式化字符串。原型。format=function(args){ var result=this；var regif(参数。长度0){ if(参数。length==1类型的(args)=' object '){ for(args中的var key){ if(args[key]！==undefined){ reg=new RegExp('({ ' key ' })'，' g ')；result=result.replace(reg，args[key])；} } } else { for(var I=0；一、论点。长度；i ) { if (arguments[i]！==undefined){ reg=new RegExp('({)' I '(})'，' g ')；result=result.replace(reg，引数[I])；} } } }返回结果；};//获取全球资源定位器(统一资源定位符)参数函数getQueryString(名称，url) { var reg=新RegExp('(^|)'名称'=([^]*)(|$)','一世；url=url url.indexOf('？')=0 ?url.substring(url.indexOf('？)，网址。长度):窗口。位置。搜索；var r=url.substr(1).match(reg)；if (r！=null)返回unescape(r[2])；返回null}/script/head body表id=' TB '边框=' 1 '单元格填充=' 0 '单元格间距=' 0 ' th宽度=' 90pxCustomerID/th宽度=' 240 pxcompany NAmE/th width=' 130 px；联系人姓名/th宽度=' 140pxContactTitle/th宽度=' 205px地址/th宽度=' 90px城市/th宽度=' 50px区域/第泰国(Thailand)宽度=' 80pxstatal code/th th width=' 80px；国家/第泰国(Thailand)宽度=' 95px电话/th宽度=' 95pxfax/th/tr/ad t body/t body/table div id=' dvPager '/div/body/html[/code]

看下效果