大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery如何实现分页插件

小编这次要给大家分享的是jQuery如何实现分页插件,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

创新互联-专业网站定制、快速模板网站建设、高性价比隰县网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式隰县网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖隰县地区。费用合理售后完善,10年实体公司更值得信赖。

本文实例讲述了jQuery实现的分页插件。分享给大家供大家参考,具体如下:

呈现

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如何实现分页插件的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。


分享文章:jQuery如何实现分页插件
标题网址:http://dzwzjz.com/article/jcgeej.html
在线咨询
服务热线
服务热线:028-86922220
TOP