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

javascript動態(tài)分頁的實現(xiàn)方法實例

 更新時間:2022年06月21日 10:57:03   作者:camellia  
最近的項目需要添加一個分頁導航的功能,沒有用網(wǎng)上封裝好的文件,通過JS自己簡單實現(xiàn)了效果,這篇文章主要給大家介紹了關(guān)于javascript動態(tài)分頁的實現(xiàn)方法,需要的朋友可以參考下

之前分頁都是使用框架給出的分頁類來實現(xiàn)分頁,當然,體驗可能不是那么好。

這次在寫YII2.0框架的后臺管理系統(tǒng)的小例子的時候,我這也嘗試了一下前后分離,用ajax來實現(xiàn)分頁跳轉(zhuǎn)。

那么前端的頁碼繪制及跳頁等其他的樣式,都是由JavaScript根據(jù)后臺返回的數(shù)據(jù)拼接而成。我的分頁效果如下圖所示:

大概就是上面的樣子。

Html代碼如下:對照第一張圖片

<ul> 
    <li><span>1<span data-id="1"></span></span></li>
    <li><a data-id="2">2</a></li>
    <li><a data-id="3">3</a></li>
    <li><a data-id="4">4</a></li>
    <li><a data-id="5">5</a></li>
    <li><a data-id="6">6</a></li>
    <li><a data-id="7">7</a></li>
    <li><a data-id="8">8</a></li>
    <li><a data-id="false"> ... </a></li>
    <li><a data-id="11"> 11 </a></li>
    <li><a data-id="next"> &gt;&gt; </a></li>
</ul>

JavaScript代碼如下:

我這里使用的是純JavaScript代碼,沒有使用jquery,這個是考慮到兼容性的問題。

/**
 * @name 繪制分頁
 * @author camellia
 * @date 20200703
 * @param pageOptions 這是一個json對象
 * @param pageTotal 總頁數(shù)
 * @param curPage 當前頁數(shù)
 * @param paginationId  顯示分頁代碼的上層DOM的id
 */
 function dynamicPagingFunc(pageOptions)
 {
    // 總頁數(shù)
    var pageTotal = pageOptions.pageTotal || 1;
    // 當前頁
    var curPage = pageOptions.curPage || 1;
    // 獲取頁面DOM對象
    var paginationId = document.getElementById(''+pageOptions.paginationId+'') || document.getElementById('pagination');
    // 如果當前頁 大于總頁數(shù)  當前頁為1
    if(curPage>pageTotal)
    {
       curPage =1;
    }
    var html = "<ul>  ";
    /*總頁數(shù)小于5,全部顯示*/
    if(pageTotal<=5)
    {
       html = appendItem(pageTotal,curPage,html);
       paginationId.innerHTML = html;
    }
    /*總頁數(shù)大于5時,要分析當前頁*/
    if(pageTotal>5)
    {
       if(curPage<=4)
       {
          html = appendItem(pageTotal,curPage,html);
          paginationId.innerHTML = html;
       }
       else if(curPage>4)
       {
          html = appendItem(pageTotal,curPage,html);
          paginationId.innerHTML = html;
       }
    }
    // 顯示到頁面上的html字符串
    // var html = "<ul>  ";
    // html = appendItem(pageTotal,curPage,html);
    html += "</ul>";
    // 顯示至頁面中
    paginationId.innerHTML = html;
 }
 
 /**
  * @name 繪制分頁內(nèi)部調(diào)用方法,根據(jù)不同頁碼來分析顯示樣式
  * @author camellia
  * @date 20200703
  * @param pageTotal 總頁數(shù)
  * @param curPage 當前頁
  * @param html 顯示在頁面上的html字符串
  */
 function appendItem(pageTotal,curPage,html)
 {
    // 顯示頁
    var showPage = 8;
    // 總頁數(shù)大于XX頁的時候,中間默認...
    var maxPage = 9;
    // 開始頁
    var starPage = 0;
    // 結(jié)束頁
    var endPage = 0;
    // 首先當前頁不為1的時候顯示上一頁
    if(curPage != 1)
    {
       html += "<li><a data-id = 'prev' > << </a></li> ";
    }
    // 當總頁數(shù)小于或等于最大顯示頁數(shù)時,首頁是1,結(jié)束頁是最大顯示頁
    if(pageTotal <= maxPage)
    {
       starPage = 1;
       endPage = pageTotal;
    }
    else if(pageTotal>maxPage && curPage<= showPage)
    {
       starPage = 1;
       endPage = showPage;
       if(curPage == showPage)
       {
          endPage = maxPage;
       }
    }
    else
    {
       if(pageTotal == curPage)
       {
          starPage = curPage - 3;
          endPage = curPage;
       }
       else
       {
          starPage = curPage - 2;
          endPage = Number(curPage) + 1;
       }
 
       html += "<li><a data-id = '1'> 1 </a></li> ";
       html += "<li><a data-id='false'> ... </a></li> ";
    }
    var i = 1;
    for(let i = starPage;i <= endPage;i++)
    {
       if(i==curPage)
       {
          html += "<li ><span>"+ i +"<span data-id="+i+"></span></span></li>";
       }
       else
       {
          html += "<li ><a data-id = "+ i +">"+i+"</a></li>";
       }
    }
 
 
    if(pageTotal<=maxPage)
    {
       if(pageTotal != curPage)
       {
          html += "<li><a data-id='next' > >> </a></li> ";
       }
    }
    else
    {
       if(curPage < pageTotal-2)
       {
          html += "<li><a data-id='false'> ... </a></li> ";
       }
       if(curPage <= pageTotal-2)
       {
          html += "<li><a data-id = "+pageTotal+" > "+pageTotal+" </a></li> ";
       }
       if(pageTotal != curPage)
       {
          html += "<li><a data-id = 'next' > >> </a></li> ";
       }
    }
    return html;
 }

 調(diào)用上邊的分頁代碼:

// 繪制分頁碼
 var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'};
 dynamicPagingFunc(pageOptions);

我這里把分頁的樣式是引用的公共css中的文件,這里就不展示了,將你的分頁html代碼把我的代碼替換掉就好。

參數(shù)的聚體解釋以及函數(shù)中用到的參數(shù),備注基本都已給出。

下面這部分是點擊各個頁碼時,請求數(shù)據(jù)及重回頁碼的部分

/**
 * @name 分頁點擊方法,因為頁面html是后生成的,所以需要使用ON方法進行綁定
 * @author camellia
 * @date 20200703
 */
 $(document).on('click', '.next', function()
 {
     layer.load(0, {shade: false});
     // 獲取當前頁碼
     var obj = $(this).attr('data-id');
     // 獲取前一頁的頁碼,點擊上一頁以及下一頁的時候使用
     var curpages = $("li .sr-only").attr('data-id');
     // 點擊下一頁的時候
     if(obj == 'next')
     {
         obj = Number(curpages) + 1;
     }
     else if(obj == 'prev')// 點擊上一頁的時候
     {
         obj = curpages - 1;
     }
     $.ajax({
         //幾個參數(shù)需要注意一下
         type: "POST",//方法類型
         dataType: "json",//預期服務器返回的數(shù)據(jù)類型
         url: "?r=xxx/xxx-xxx" ,//url
         data: {'page':obj},
         success: function (result)
         {
             // 將列表部分的html清空
             document.getElementById('tbody').innerHTML = '';
             // 重新繪制數(shù)據(jù)列表
             drawPage(result.dbbacklist);
             // 繪制分頁碼
             var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'};
             dynamicPagingFunc(pageOptions);
             layer.closeAll();
         },
         error : function() {
             alert("異常!");
         }
     });
 });

總結(jié)

到此這篇關(guān)于javascript動態(tài)分頁實現(xiàn)的文章就介紹到這了,更多相關(guān)js動態(tài)分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • JavaScript實現(xiàn)圖片放大預覽效果

    JavaScript實現(xiàn)圖片放大預覽效果

    這篇文章主要介紹了JavaScript實現(xiàn)圖片放大預覽效果,幫助大家更好的理解和制作JavaScript特效,感興趣的朋友可以了解下
    2020-11-11
  • Javascript數(shù)組中push方法用法分析

    Javascript數(shù)組中push方法用法分析

    這篇文章主要介紹了Javascript數(shù)組中push方法用法,結(jié)合實例形式分析了javascript中push方法的原理、使用方法與相關(guān)注意事項,需要的朋友可以參考下
    2016-10-10
  • 詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表

    詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表

    execCommand方法是執(zhí)行一個對當前文檔,當前選擇或者給出范圍的命令。在HTML5中,execCommand可以通過JavaScript代碼來調(diào)用,使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復雜的文本操作。在HTML編輯器中這個命令用得很多,酷炫的強大功能。
    2023-07-07
  • 通過js來制作復選框的全選和不選效果

    通過js來制作復選框的全選和不選效果

    這篇文章主要介紹的是通過js來制作復選框的全選和不選效果,需要的朋友可以參考下
    2014-05-05
  • 樹結(jié)構(gòu)之JavaScript

    樹結(jié)構(gòu)之JavaScript

    本文主要介紹了JavaScript樹結(jié)構(gòu)的相關(guān)知識。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • 詳解JS函數(shù)重載

    詳解JS函數(shù)重載

    本文主要介紹了利用JavaScript中的特殊對象arguments來模擬函數(shù)重載的解決方案,非常的實用,給需要的小伙伴參考下
    2014-12-12
  • Javascript 鏈式作用域詳細介紹

    Javascript 鏈式作用域詳細介紹

    這篇文章主要介紹了Javascript 鏈式作用域詳細介紹的相關(guān)資料,需要的朋友可以參考下
    2017-02-02
  • 減少訪問DOM的次數(shù)提升javascript性能

    減少訪問DOM的次數(shù)提升javascript性能

    訪問修改DOM元素都會導致瀏覽器重新計算頁面的幾何變化,下面為大家介紹下javascript性能提升方法,需要的朋友可以參考下
    2014-02-02
  • 淺談js使用in和hasOwnProperty獲取對象屬性的區(qū)別

    淺談js使用in和hasOwnProperty獲取對象屬性的區(qū)別

    下面小編就為大家?guī)硪黄獪\談js使用in和hasOwnProperty獲取對象屬性的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • JS中Promise函數(shù)then的奧秘探究

    JS中Promise函數(shù)then的奧秘探究

    then()方法用于指定當前實例狀態(tài)發(fā)生改變時的回調(diào)函數(shù)。它返回一個新的Promise實例。下面這篇文章主要給大家介紹了關(guān)于JS中Promise函數(shù)then的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧
    2018-07-07

最新評論