單篇文章JS模擬分頁

2019-11-14 16:32:39

字體：大中小

來源：轉載

供稿：網友

廢話部分

前兩天做了一個前臺分頁插件，支持Ajax讀取數據綁定前臺和 url帶頁碼參數跳轉兩種方式。于是稍加改動，做了一個單篇文章js模擬分頁的代碼，為什么說是模擬分頁呢？因為在服務器響應HTML請求的時候，就已經把全文回傳給客戶端了，只是我們通過js的方式，把全文隱藏，每次翻頁至顯示出我們需要的那一部分，而不是真正的按需要去發出HTML請求。所以，在做這個插件的時候去掉了ajax請求的功能及其附帶參數，去掉了pageSize參數（恒等于1）。這里就不討論具體的技術細節了和上一篇的分頁計算原理大致相同，有興趣的同學可以移步：http://m.survivalescaperooms.com/webconfig/p/3864350.html，這里不再贅述。

效果圖

再來看張完整的

基本思路

當頁面中的正文文章部分的下面加載JS，通過指定好的ID，把正文內容保存在分頁對象（全局變量）的一個屬性中，首次加載當前頁為1，Load() 方法中只有一個分頁對象的參數，以后每次翻頁 Load() 方法中多加一個當前頁參數，然后JS 取值計算填充容器。

調用方法

引入樣式和Jquery和分頁插件

1 <script src="jquery-1.11.1.min.js"></script>2 <script src="ruguoTextPager_1.0.js"></script>3 <link rel="stylesheet" type="text/CSS" href="ruguoPager.css">

HTML結構 con中為正文內容，在需要分頁的地方插入我自定義的分頁符“ {ruguo:pager} ”，至于如果文中真的要出現這個字符串的話，請轉義。

1 <div class="con" id="con">2 <p>段落1</p>{ruguo:pager}3 <p>段落1</p>4 <p>段落1</p>{ruguo:pager}5 <p>段落1</p>6 </div>7 <div class="ruguoPager_red" id="pager"></div>

JS 初始化實例化對象 pager，給對象需要自定義的屬性賦值，不賦值的等于默認值，最后調用方法，對象作為實參傳進去即可。

 1 <script> 2 var pager = new ruguoPager(); 3 pager.objName="pager"; 4 pager.pagerID="pager"; 5 pager.txtID="con"; 6 pager.toPoint="con" 7 pager.showPageCount=3; 8 pager.currPage=1; 9 ruguoPagerLoad(pager);10 </script>

參數列表（參數名默認值含義可選值是否必須）

sig="{ruguo:pager}",   //分頁符 stringobjName="",   //對象名  stringpagerID="",  //分頁容器ID  string  必須txtID="",  //正文容器ID  string  必須currPage=1,  //當前頁  intitemCount=0,  //總分段（頁）數    無需定義，歷史遺留問題showPageCount="3";  //頁面顯示數量  inttoPoint="",  //點擊返回錨點名稱  stringcontents="",  //正文內容，一般情況下無需定義 isShowFirstPage="always",  //是否顯示首頁  always,auto,noneisShow//是否顯示上一頁  always,auto,noneisShowNextPage="always",  //是否顯示下一頁  always,auto,noneisShowLastPage="always",  //是否顯示尾頁  always,auto,noneisShowPages="always",  //是否顯示頁碼  always,auto_0,auto_1,noneisShowAll="always",   //是否顯示全文  always,auto,noneisShowGo="always"  //是否顯示跳轉  always,auto,none