大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编这次要给大家分享的是jQuery如何实现分页插件,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
创新互联-专业网站定制、快速模板网站建设、高性价比隰县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式隰县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖隰县地区。费用合理售后完善,10年实体公司更值得信赖。
本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考,具体如下:
呈现
html文件
Insert title here
css文件
@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文件
/** * 侠 2018-8-15 */ function loadAll() { var theFirstPage = "首页"; var prePage = "上一页"; var pagess = "1" + "2" + "3" + "4" + "5"; var nextPage = "下一页"; var theLastPage = "末页"; var currentPages = "第1页"; var pageNums = "共" + pages + "页"; var jump = ""; var jumpClick = "跳转"; $("#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如何实现分页插件的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。