欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例

 更新時(shí)間：2020年05月26日 09:08:53   作者：Z_DZ  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)插件,結(jié)合完整實(shí)例形式分析了jQuery分頁(yè)插件的定義與使用相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)的分頁(yè)插件。分享給大家供大家參考，具體如下：

呈現(xiàn)

html文件 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script src="引入一個(gè)jquery文件，這里就不提供了"></script>
        <link rel="stylesheet" href="引入下邊提供的css文件" rel="external nofollow" >
    </head>
    <body>
        <div id="pages" class="devidePage" ></div>
    </body>
        <script>
            var pages=10; //計(jì)算出總頁(yè)數(shù)(一定要是5的倍數(shù))
            
            function getData(num){
                /*當(dāng)前頁(yè)數(shù)*/
                var currentPageNum = num;
                /*取數(shù)據(jù)*/
                $.ajax({
                type: "post",
                url: url, /*請(qǐng)求的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("不合法！錯(cuò)誤信息如下："+data.errorMsg);
                  }
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {   
                  console.log("請(qǐng)求失?。?);
                }
                });
            }
            function setData(data){
                /*放數(shù)據(jù)*/
            }
        </script>
        <script src="引入下邊提供的js文件"></script>
</html>

css文件

@charset "UTF-8";
/*分頁(yè)所在的div*/
.devidePage{
    margin-top:300px;
    margin-left: 400px;
    height: 50px;
    width: 800px;
    /* background: gray; */
}
/*顯示頁(yè)數(shù)的div*/
.pages{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*首頁(yè)*/
.theFirstPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*末頁(yè)*/
.theLastPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*上一頁(yè)*/
.prePage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*下一頁(yè)*/
.nextPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:50px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
/*當(dāng)前頁(yè)數(shù)*/
.currentPage{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*總頁(yè)數(shù)*/
.pageNums{
    float:left;
    margin-left:2px;
    height:50px;
    width:100px;
    background: #EEEEEE;
    text-align:center;
    line-height:50px;
}
/*輸入頁(yè)數(shù)*/
.jump{
    float:left;
    margin-left:2px;
    height:48px;
    width:50px;
    border:0.5px solid #EEEEEE;
}
/*跳轉(zhuǎn)*/
.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 = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">首頁(yè)</div>";
    var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上一頁(yè)</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()\">下一頁(yè)</div>";
    var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末頁(yè)</div>";
    var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1頁(yè)</div>";
    var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages
            + "頁(yè)</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()\">跳轉(zhuǎn)</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");  //配置默認(rèn)顏色
    for (var i = 0; i < 5; i++) {
        if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1]
                .split("頁(yè)")[0]) {
            $("#page_" + (i + 1)).css("background", "#66b2ff"); //配置選中顏色
            break;
        }
    }
}
function theFirstPage(){
    $('#currentPage').html("第" + 1 + "頁(yè)");
    $("#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 + "頁(yè)");
    $("#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() + "頁(yè)");
    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("頁(yè)")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum > 1) {
        var toPageNum = currentPageNum - 1;
        $("#currentPage").html("第" + toPageNum + "頁(yè)");
        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("頁(yè)")[0];
    var currentPageNum = parseInt(currentPageNumStr);
    if (currentPageNum < pages) {
        var toPageNum = currentPageNum + 1;
        $("#currentPage").html("第" + toPageNum + "頁(yè)");
        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 + "頁(yè)");
        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("頁(yè)")[0] );
}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jQuery遍歷json的方法(推薦)

    jQuery遍歷json的方法(推薦)

    這篇文章主要介紹了jQuery遍歷json的方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-06-06
  • jQuery取得設(shè)置清空select選擇的文本與值

    jQuery取得設(shè)置清空select選擇的文本與值

    這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下
    2014-07-07
  • jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼

    jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼,點(diǎn)擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • 基于jQuery的日期選擇控件

    基于jQuery的日期選擇控件

    終于把jQuery拼寫(xiě)正確了哈，哈哈javascript也是區(qū)分大小寫(xiě)的,所以確實(shí)不能寫(xiě)錯(cuò)，今天我來(lái)和大家分享的是日期選擇控件的實(shí)現(xiàn)，功能也許不夠強(qiáng)大，但是能夠滿(mǎn)足需求。
    2009-10-10
  • JQuery懸?？刂茍D片輪播——代碼簡(jiǎn)單

    JQuery懸?？刂茍D片輪播——代碼簡(jiǎn)單

    jquery實(shí)現(xiàn)的鼠標(biāo)懸停圖片自動(dòng)輪播效果，當(dāng)把鼠標(biāo)懸停到圖片時(shí)，圖像就會(huì)不斷循環(huán)播放，速度非常快，效果非常逼真，就和在放武俠片一樣，使用了jquery實(shí)現(xiàn)
    2015-08-08
  • 統(tǒng)計(jì)jQuery中各字符串出現(xiàn)次數(shù)的工具

    統(tǒng)計(jì)jQuery中各字符串出現(xiàn)次數(shù)的工具

    如果使用一個(gè)變量替換，使用工具壓縮時(shí)將會(huì)進(jìn)一步減少文件的大小
    2012-05-05
  • JQuery入門(mén)基礎(chǔ)小實(shí)例(1)

    JQuery入門(mén)基礎(chǔ)小實(shí)例(1)

    這篇文章主要講述了一個(gè)JQuery入門(mén)基礎(chǔ)小實(shí)例，實(shí)現(xiàn)的過(guò)程效果都很簡(jiǎn)單，特別適合初學(xué)者來(lái)學(xué)習(xí)，感興趣的小伙伴們可以參考一下
    2015-09-09
  • JQuery操作tr和td內(nèi)容的方法實(shí)例

    JQuery操作tr和td內(nèi)容的方法實(shí)例

    本文介紹了“JQuery操作tr和td內(nèi)容的方法實(shí)例”，需要的朋友可以參考一下
    2013-03-03
  • 寫(xiě)得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過(guò)變色代碼

    寫(xiě)得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過(guò)變色代碼

    鼠標(biāo)經(jīng)過(guò)table變色的效果，想必大家都有遇到過(guò)吧，其實(shí)實(shí)現(xiàn)并不難，在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參看下
    2013-09-09
  • jQuery實(shí)現(xiàn)雪花飄落效果

    jQuery實(shí)現(xiàn)雪花飄落效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-08-08

最新評(píng)論