jQuery实现的分页插件完整示例

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

呈现

html文件 

css文件

@charset "UTF-8";

.devidePage{
    margin-top:300px;
    margin-left: 400px;
    height: 50px;
    width: 800px;
    
}

.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文件

 
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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。