jQuery实现的分页插件完整示例
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考,具体如下:
呈现
html文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > < title >Insert title here</ title > < script src = "引入一个jquery文件,这里就不提供了" ></ script > < link rel = "stylesheet" href = "引入下边提供的css文件" rel = "external nofollow" > </ head > < body > < div id = "pages" class = "devidePage" ></ div > </ body > < script > var pages=10; //计算出总页数(一定要是5的倍数) function getData(num){ /*当前页数*/ var currentPageNum = num; /*取数据*/ $.ajax({ type: "post", url: url, /*请求的servlet的地址*/ data: {"currentPageNum":currentPageNum}, cache: false, async : false, dataType: "json", success: function (data ,textStatus, jqXHR) { if("true"==data.flag){ setData(data.data); }else{ console.log("不合法!错误信息如下:"+data.errorMsg); } }, error:function (XMLHttpRequest, textStatus, errorThrown) { console.log("请求失败!"); } }); } function setData(data){ /*放数据*/ } </ script > < script src = "引入下边提供的js文件" ></ script > </ html > |
css文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | @charset "UTF-8" ; /*分页所在的div*/ .devidePage{ margin-top : 300px ; margin-left : 400px ; height : 50px ; width : 800px ; /* background: gray; */ } /*显示页数的div*/ .pages{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } /*首页*/ .theFirstPage{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } /*末页*/ .theLastPage{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } /*上一页*/ .prePage{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } /*下一页*/ .nextPage{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } /*当前页数*/ .currentPage{ float : left ; margin-left : 2px ; height : 50px ; width : 100px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; } /*总页数*/ .pageNums{ float : left ; margin-left : 2px ; height : 50px ; width : 100px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; } /*输入页数*/ .jump{ float : left ; margin-left : 2px ; height : 48px ; width : 50px ; border : 0.5px solid #EEEEEE ; } /*跳转*/ .jumpClick{ float : left ; margin-left : 2px ; height : 50px ; width : 50px ; background : #EEEEEE ; text-align : center ; line-height : 50px ; cursor : pointer ; } |
js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | /** * 侠 2018-8-15 */ function loadAll() { var theFirstPage = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">首页</div>" ; var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上一页</div>" ; var pagess = "<div id=\"page_1\" class=\"pages\" οnclick=\"changePage(this.id)\">1</div>" + "<div id=\"page_2\" class=\"pages\" οnclick=\"changePage(this.id)\">2</div>" + "<div id=\"page_3\" class=\"pages\" οnclick=\"changePage(this.id)\">3</div>" + "<div id=\"page_4\" class=\"pages\" οnclick=\"changePage(this.id)\">4</div>" + "<div id=\"page_5\" class=\"pages\" οnclick=\"changePage(this.id)\">5</div>" ; var nextPage = "<div class=\"nextPage\" οnclick=\"nextPage()\">下一页</div>" ; var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末页</div>" ; var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>" ; var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages + "页</div>" ; var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" " + "οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\"" + " οnblur=\"this.v();\">" ; var jumpClick = "<div class=\"jumpClick\" οnclick=\"jump()\">跳转</div>" ; $( "#pages" ).html(theFirstPage + prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump + jumpClick); } loadAll(); function defultBackground() { $( "#page_1" ).css( "background" , "#66b2ff" ); //配置选中颜色 } defultBackground(); function changeBackground() { $( ".pages" ).css( "background" , "#EEEEEE" ); //配置默认颜色 for ( var i = 0; i < 5; i++) { if ($( "#page_" + (i + 1)).text() == $( "#currentPage" ).text().split( "第" )[1] .split( "页" )[0]) { $( "#page_" + (i + 1)).css( "background" , "#66b2ff" ); //配置选中颜色 break ; } } } function theFirstPage(){ $( '#currentPage' ).html( "第" + 1 + "页" ); $( "#page_1" ).html(1); $( "#page_2" ).html(2); $( "#page_3" ).html(3); $( "#page_4" ).html(4); $( "#page_5" ).html(5); changeBackground(); getData(getCurrentPageNum()); } function theLastPage(){ $( '#currentPage' ).html( "第" + pages + "页" ); $( "#page_1" ).html(pages-4); $( "#page_2" ).html(pages-3); $( "#page_3" ).html(pages-2); $( "#page_4" ).html(pages-1); $( "#page_5" ).html(pages); changeBackground(); getData(getCurrentPageNum()); } function changePage(id) { var pagenum = parseInt($( "#" + id).text()) - 1; $( '#currentPage' ).html( "第" + $( "#" + id).text() + "页" ); if ((id.split( "_" )[1] == 1) && (parseInt($( "#" + id).text()) > 1)) { $( "#page_1" ).html(parseInt($( "#page_1" ).text()) - 1); $( "#page_2" ).html(parseInt($( "#page_2" ).text()) - 1); $( "#page_3" ).html(parseInt($( "#page_3" ).text()) - 1); $( "#page_4" ).html(parseInt($( "#page_4" ).text()) - 1); $( "#page_5" ).html(parseInt($( "#page_5" ).text()) - 1); } if ((id.split( "_" )[1] == 5) && (parseInt($( "#" + id).text()) < pages)) { $( "#page_1" ).html(parseInt($( "#page_1" ).text()) + 1); $( "#page_2" ).html(parseInt($( "#page_2" ).text()) + 1); $( "#page_3" ).html(parseInt($( "#page_3" ).text()) + 1); $( "#page_4" ).html(parseInt($( "#page_4" ).text()) + 1); $( "#page_5" ).html(parseInt($( "#page_5" ).text()) + 1); } changeBackground(); getData(getCurrentPageNum()); } function prePage() { var currentPageNumStr = $( "#currentPage" ).text().split( "第" )[1].split( "页" )[0]; var currentPageNum = parseInt(currentPageNumStr); if (currentPageNum > 1) { var toPageNum = currentPageNum - 1; $( "#currentPage" ).html( "第" + toPageNum + "页" ); if ((currentPageNum > 1) && ($( "#page_1" ).text() != 1)) { $( "#page_1" ).html(parseInt($( "#page_1" ).text()) - 1); $( "#page_2" ).html(parseInt($( "#page_2" ).text()) - 1); $( "#page_3" ).html(parseInt($( "#page_3" ).text()) - 1); $( "#page_4" ).html(parseInt($( "#page_4" ).text()) - 1); $( "#page_5" ).html(parseInt($( "#page_5" ).text()) - 1); } changeBackground(); getData(getCurrentPageNum()); } else { } } function nextPage() { var currentPageNumStr = $( "#currentPage" ).text().split( "第" )[1].split( "页" )[0]; var currentPageNum = parseInt(currentPageNumStr); if (currentPageNum < pages) { var toPageNum = currentPageNum + 1; $( "#currentPage" ).html( "第" + toPageNum + "页" ); if (currentPageNum >= 5 && ($( "#page_5" ).text() != pages)) { $( "#page_1" ).html(parseInt($( "#page_1" ).text()) + 1); $( "#page_2" ).html(parseInt($( "#page_2" ).text()) + 1); $( "#page_3" ).html(parseInt($( "#page_3" ).text()) + 1); $( "#page_4" ).html(parseInt($( "#page_4" ).text()) + 1); $( "#page_5" ).html(parseInt($( "#page_5" ).text()) + 1); } changeBackground(); getData(getCurrentPageNum()); } else { } } function jump() { var numstr = $( "#jump" ).val(); var num = parseInt(numstr); if ((num < 1) || (num > pages)) { alert( "输入不合法" ); $( "#jump" ).val(1); } else { $( "#currentPage" ).html( "第" + num + "页" ); if (num >= 5) { $( "#page_5" ).html(num); $( "#page_4" ).html(num - 1); $( "#page_3" ).html(num - 2); $( "#page_2" ).html(num - 3); $( "#page_1" ).html(num - 4); } else { if (num = 4) { $( "#page_5" ).html(num + 1); $( "#page_4" ).html(num); $( "#page_3" ).html(num - 1); $( "#page_2" ).html(num - 2); $( "#page_1" ).html(num - 3); } if (num = 3) { $( "#page_5" ).html(num + 2); $( "#page_4" ).html(num + 1); $( "#page_3" ).html(num); $( "#page_2" ).html(num - 1); $( "#page_1" ).html(num - 2); } if (num = 2) { $( "#page_5" ).html(num + 3); $( "#page_4" ).html(num + 2); $( "#page_3" ).html(num + 1); $( "#page_2" ).html(num); $( "#page_1" ).html(num - 1); } if (num = 1) { $( "#page_5" ).html(num + 4); $( "#page_4" ).html(num + 3); $( "#page_3" ).html(num + 2); $( "#page_2" ).html(num + 1); $( "#page_1" ).html(num); } } changeBackground(); getData(getCurrentPageNum()); } } function getCurrentPageNum(){ return parseInt( $( "#currentPage" ).text().split( "第" )[1].split( "页" )[0] ); } |
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论