整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          如何給wordpress網站的文章列表,添加分頁效果

          如何給wordpress網站的文章列表,添加分頁效果?可以通過2種方式

          上一章節中,我們為wordpress網站的首頁添加了全站文章列表。一個wordpress網站不可能只有幾篇文章,可能會有成千上萬的文章,作為一個wordpress博客主題模板,一般情況下,不可能讓所有的文章在一個頁面一下子全部顯示出來,如果真這樣,網頁的負載會非常大。正確的處理方式,是先顯示最前面的十幾篇或二十幾篇文章,然后,“點擊一個分頁按鈕”或者“鼠標向下滾動觸發一個事件”后,再顯示后面的十幾篇或二十幾篇文章,以此類推。本節,我們來介紹“如何給wordpress網站的文章列表添加分頁效果”,一起來看看吧。

          方法一:給wordpress網站模板添加自定義分頁函數。

          在wordpress網站模板的functions.php文件中添加如下代碼:


          //分頁函數function pages($query_string){

          global $posts_per_page, $paged; //全局變量

          $my_query=new WP_Query($query_string ."&posts_per_page=-1"); //創建查詢對象

          $total_posts=$my_query->post_count; //通過查詢對象獲取文章總數

          if(empty($paged)) $paged=1; //當前頁碼數,如是$paged為空,就讓

          $paged=1$prev=$paged - 1; //上一頁變量

          $next=$paged + 1; //下一頁變量

          $range=4; //

          $showitems=($range * 2)+1; //顯示多少個分頁頁碼按鈕

          $pages=ceil($total_posts/$posts_per_page); //獲取總頁數

          if(1 !=$pages){

          echo "<div class='pagination'>";

          echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";

          echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</a>":"";

          for ($i=1; $i <=$pages; $i++){

          if (1 !=$pages &&( !($i >=$paged+$range+1 || $i <=$paged-$range-1) || $pages <=$showitems )){

          echo ($paged==$i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";

          }

          }

          echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";

          echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";echo "</div>\n";

          }

          }

          然后,在wordpress網站前臺模板的文章列表的代碼下方調用這個分頁函數,代碼如下:


          <?php pages($query_string); //列表分頁 ?>

          然后,我們就可以在wordpress網站的文章列表下方看到分頁按鈕。如果想要樣式好看一點,可以對分頁按鈕添加CSS樣式,來進行美化一下。

          方法二:使用wordpress自帶的分頁函數。

          為了更方便wordpress網站模板開發者開發模板主題,wordpress從4.0版本開始,就提供了一個分頁函數the_posts_pagination(),通過這個函數,我們同樣可能實現wordpress網站的文章列表的分頁效果。代碼如下:


          the_posts_pagination( array('mid_size'=> 3, //當前頁碼數的 兩邊 顯示幾個頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );

          這個函數跟wordpress其wp_list_pages()等函數類似,有一個參數,這個參數可是一個數組類型(如上面的代碼,參數就是數組類型),也可以是一個字符串類型,上面的的代碼的參數修改成字符串類型后,如下:


          the_posts_pagination("mid_size=3&prev_text=<&next_text=>");

          是使用字符串類型,還是使用數組類型,主要根據開發者的個人愛好,我個人還是比較喜歡用數組類型,看起來比較清楚。

          在wordpress網站模板開發中,使用上面任何一種方式來添加文章列表的分頁效果都可以,不過,我個人還是建議使用wordpress自帶的函數the_posts_pagination(),對開發更省事,效率更高,而且是wordpress自己的函數,后期都不需要維護。如果想讓分頁按鈕布局更加個性化,可以考第一種方式。

          如果還有什么不太明白的,或者你想了解什么,可以在下面評論中給我留言。

          最近在業務上遇到了一個問題是要將頁面打印輸出成pdf文件,通過點擊一個按鈕,就能夠將頁面寫在一個pdf上,并下載下來,需要保證pdf的內容具有很好的可讀性。

          經評估要實現這個需求,一種可行的方案是將HTML頁面轉為PDF,并實現下載。通過技術調研,最終的方案確定為通過html2canvas + jspdf這兩個庫來實現,通過使用html2canvas提供的方法,將頁面元素轉為base64圖片流,然后將其插入jspdf插件中,實現保存并下載pdf。

          html2canvas + jspdf方案是前端實現頁面打印的一種常用方案,但是在實踐過程中,遇到的最大問題就是分頁截斷的問題:當頁面元素超過一頁A4紙的時候,連續的頁面就會因為分頁而導致內容被截斷,進而影響了pdf的可讀性。

          由于網上關于分頁截斷的解決思路比較少,所以特意將此次的解決方案記錄下來。

          使用 JSPDF 和 html2canvas 創建簡單的 PDF文件

          首先,我們開始使用 JSPDF 和 html2canvas 生成一個簡單的 PDF文件。

          創建一個 JSPDF 實例

          創建一個 JSPDF 實例,設置頁面的大小、方向和其他參數。參考官網可以寫一個很簡單的實例

          var doc=new jsPDF({
            orientation: 'landscape',
            unit: 'in',
            format: [4, 2]
          }
          
          doc.text('Hello world!', 1, 1)
          doc.save('two-by-four.pdf')
          
          

          生成一個pdf文件,并且在文件中寫入一定內容,其實JSPDF這個庫就能做到。

          但是很多業務場景下,我們的目標內容會更復雜,而且還要考慮樣式,所以最好的方式是引入html2canvas這個庫,將頁面元素轉換成base64數據,然后貼在pdf中(使用addImage方法),這樣就能保證頁面的內容。

          引入了html2canvas庫后,我們更多關注是利用現成組件庫、框架或者原生html和css實現更復雜的頁面內容

          引入 html2canvas

          使用 html2canvas 捕捉 HTML 內容或特定的 HTML 元素,并將其轉換為 Canvas。其中,html2canvas 函數的主要用法是:

          html2canvas(element, options);
          
          • element 要渲染為 canvas 的 HTML 元素。這可以是一個 DOM 元素,也可以是一個選擇器字符串,表示需要渲染的元素。
          • options(可選): 一個包含配置選項的對象,用于定制 html2canvas 的行為。

          以下是一些常見的配置選項:

          • allowTaint(默認值: false): 是否允許加載跨域的圖片,默認為 **false**。如果設為 truehtml2canvas 將嘗試加載跨域的圖片,但在某些情況下可能會受到瀏覽器的限制。
          • backgroundColor(默認值: #ffffff): canvas 的背景顏色。
          • useCORS(默認值: false): 是否使用 CORS(Cross-Origin Resource Sharing)來加載圖片。如果設置為 **true**,則 html2canvas 將嘗試使用 CORS 來加載圖片。
          • logging(默認值: false): 是否輸出日志信息到控制臺。
          • widthheight canvas 的寬度和高度。如果未指定,則默認為目標元素的寬度和高度。
          • scale(默認值: window.devicePixelRatio): 縮放因子,決定 canvas 的分辨率。

          下面是一個簡單的demo,可以看到html2canvas能夠將dom元素轉化為一張base64圖片,將鼠標選中元素,可以感受到圖片和文字的不同。

          <div id="capture" style="padding: 10px; background: #f5da55">
              <h4 style="color: #000; ">Hello world!</h4>
          </div>
          
          html2canvas(document.querySelector("#capture")).then(canvas=> {
              document.body.appendChild(canvas)
          });
          

          Untitled.png

          將html2canvas轉化的圖片放到pdf中

          這一步我們需要使用JSPDF 的addImage方法,其語法如下:

          addImage(imageData, format, x, y, width, height, alias, compression)
          
          • imageData - 要添加的圖像數據。可以是圖像的 URL、圖像的 base64 編碼字符串或圖像的二進制數據
          • format - 圖像的格式。可以是 "JPEG"、"PNG" 或 "TIFF"。
          • x - 圖像在 PDF 文檔中的 x 坐標。
          • y - 圖像在 PDF 文檔中的 y 坐標。
          • width - 圖像的寬度。
          • height - 圖像的高度。
          • alias - 圖像的別名。此別名可用于在 PDF 文檔中引用圖像。
          • compression - 圖像的壓縮級別。可以是 "NONE"、"FAST" 或 "SLOW"。

          下面是一串示例代碼:

          import jsPDF from 'jspdf';
          
          export default function addImageUsage() {
            const doc=new jsPDF();
            const imageData=【替換成base64數據流】;
            doc.addImage(imageData, 'png', 0, 0, 10, 10);
            doc.addImage(imageData, 'png', 100, 100, 10, 10);
            doc.addImage(imageData, 'png', 200, 200, 10, 10);
          
            drawNet(doc);
          
            doc.save('output.pdf');
          }
          
          const drawNet=(doc)=> {
            const gap=10;
            const start=[0, 0];
            const end=[595.28, 841.89];
          
            // 所有橫線
            for (let i=start[0]; i < end[0]; i=i + gap) {
              doc.line(i, 0, i, end[0]);
            }
            // 所有縱線
            for (let j=start[1]; j < end[1]; j=j + gap) {
              doc.line(0, j, end[1], j);
            }
          };
          

          此示例將在 PDF 文檔(默認是A4紙大小,寬高為[595.28, 841.89]像素)的 (10, 10)(100, 100)(200, 200) 坐標處,添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素,為了了解pdf中的坐標系統,此示例還在pdf文檔中生成了間距為10px的網格系統。

          JSPDF 和 html2canvas結合起來用

          了解了上面的三個關鍵點,接下來我們將這三個步驟串聯起來,實現一個基本的html→pdf的方案。大致步驟如下:

          1. 寫一個基本html頁面
          2. 創建jspdf實例
          3. 獲取頁面的dom節點,使用html2canvas將其轉化為base64數據流
          4. base64數據流裝載到jspdf提供的addImage方法中
          5. 保存pdf

          基于這5個步驟,可以實現基本的頁面打印。

          import html2canvas from 'html2canvas';
          import jsPDF, { RGBAData } from 'jspdf';
          
          // 將元素轉化為canvas元素
          // 通過 放大 提高清晰度
          // width為內容寬度
          async function toCanvas(element: HTMLElement) {
            if (!element) return { width: 0, height: 0 };
          
            // canvas元素
            const canvas=await html2canvas(element, {
              scale: window.devicePixelRatio * 2, // 增加清晰度
              useCORS: true // 允許跨域
            });
          
            // 獲取canvas轉化后的寬高
            const { width: canvasWidth, height: canvasHeight }=canvas;
          
            // 轉化成圖片Data
            const canvasData=canvas.toDataURL('image/jpeg', 1.0);
          
            return { width: canvasWidth, height: canvasHeight, data: canvasData };
          }
          
          /**
           * 生成pdf(A4多頁pdf截斷問題, 包括頁眉、頁腳 和 上下左右留空的護理)
           */
          export async function generatePDF({
            /** pdf內容的dom元素 */
            element,
          
            /** pdf文件名 */
            filename
          }) {
            if (!(element instanceof HTMLElement)) {
              return;
            }
          
            const pdf=new jsPDF();
          
            // 一頁的高度, 轉換寬度為一頁元素的寬度
            const {
              width: imageWidth,
              height: imageHeight,
              data
            }=await toCanvas(element);
          
            // 添加圖片
            function addImage(
              _x: number,
              _y: number,
              pdfInstance: jsPDF,
              base_data:
                | string
                | HTMLImageElement
                | HTMLCanvasElement
                | Uint8Array
                | RGBAData,
              _width: number,
              _height: number
            ) {
              pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height);
            }
          
            addImage(0, 0, pdf, data!, imageWidth, imageHeight);
          
            return pdf.save(filename);
          }
          

          多頁:比例縮放+循環移位

          通常,在我們的實踐中,會發現2個問題:

          • 生成的pdf內容與實際的頁面元素比例不一致
          • 頁面內容超出一頁pdf的高度,但是生成的pdf只有一頁,沒有展示全部的頁面信息

          這兩個問題的解決方案是等比例縮放+循環移位

          • 等比例縮放

          通過比例縮放,實現頁面內容等比例展示在pdf文檔中

          令頁面元素的寬高為x, y(轉化成canvas圖片的寬高),pdf文檔的寬高為w, h。因為高度可以通過加頁延伸,所以可以按照寬度進行縮放,縮放后的圖片高度可以通過下列公式計算

          • 循環移位

          如果頁面的高度超出了pdf文檔的高度,即y > h,使用addPage方法添加一頁即可。但是在新的一頁中,我們的圖片內容的高度需要調整。

          假設y=2 * h,這意味我們需要兩頁才能完整得展示頁面內容。在一頁pdf中,圖片在起始位置插入即可,即

           PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是縮放后的大小
          

          在第二頁pdf中,圖片的縱向位置需要調整一頁pdf的高度,即

           PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是縮放后的大小
          

          通過循環計算剩余高度,然后不停調整縱向位置移動base64的圖片位置,可以解決多頁的問題。

          分頁截斷的挑戰

          盡管 JSPDFhtml2canvas 是功能強大的工具,但是他們也有很多槽點,比如得手動分頁,手動處理分頁截斷的問題。等你實踐到這一步,就開始面臨分頁截斷的問題,類似的問題也有網友在Github上提出,但是底下依然沒有很好的解決思路。

          好在掘金上有人分享了一個不錯的方法:

          jsPDF + html2canvas A4分頁截斷 完美解決方案(含代碼 + 案例) - 掘金

          概括一下,其處理分頁截斷的原理就是在使用addImage之前,將html進行分頁,通過維護一個高度位置數據,來記錄每次循環迭代addImage的位置。

          從高到低遍歷維護一個分頁數組pages,該數組記錄每一頁的起始位置,如:pages[0] 對應 第一頁起始位置,pages[1] 對應第二頁起始位置

          Untitled2.png

          接下來我們重點討論如何將頁面進行切割,然后生成pages這個數組。

          假設頁面的高度是1500,pdf寬高是[500, 900],如果不用處理分頁截斷的問題,我們可以想到第一頁(0-900)是用來承載頁面從高度為0到900的信息;

          第二頁(900-1800)是用來承載頁面從高度900到1500的,所以pages數組為[0, 900]。

          如果要處理分頁截斷呢,這時候就需要計算頁面元素的距離pdf文檔起始位置的高度h1,以及該元素的內部高度h2,通過這兩個高度來判斷這個元素要不要放在下一頁,防止截斷,示意圖如下:

          Untitled4.png

          如果h1 + h2 > 頁面高度, 這時候說明這個元素不處理的就會被分頁截斷,所以應該要把這個元素放到第二頁去渲染,這就意味著pages記錄的數據要變化,示意圖如下,可以看到pages[1]我們往上調整了,比第二頁pdf的起始位置更高。

          Untitled5.png

          說明渲染第二頁pdf的時候,要從h1開始渲染,pages數組為[0, h1],解釋為第一頁pdf渲染頁面高度區域為0-900, 第二頁pdf渲染html高度區域為h1-1500。注意到第一頁渲染的時候到尾部的時候,會有部分內容和第二頁頭部內容重合。因為h1900這部分的內容肯定會渲染,這部分內容一直都是頁面元素,我們改變pages[1]的值的原因只是創建一個副本,讓頁面看起來內容沒有被截斷。

          為了解決這個問題(為了美觀),我們用填充一塊白色區域遮掉它!此處使用jspdfrectsetFillColor方法,把重合的區域遮白處理。

          pdf.setFillColor(255, 255, 255);
          pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');
          

          如何獲得h1和h2

          上面我們談到了h1h2,其中h1是元素盒子的上邊距到打印區域的高度(比例縮放后的高度),h2是元素盒子的內部高度。

          計算h1: getBoundingClientRect方法

          const rect=contentElement.getBoundingClientRect() || {};
          const topDistance=rect.top;
          return topDistance;
          

          Untitled6.png

          計算h2:offsetHeight方法

          Untitled7.png

          值得注意的是,因為打印區域的html元素不一定是從窗口頂部開始,所以為了計算實際的h1(元素到打印區域的頂部距離),可以采用這樣的方法:

          • getBoundingClientRect方法計算元素到窗口頂部的距離
          • 循環打印之前將pages信息針對第一個元素進行一個高度校準。
          // 對pages進行一個值的修正,因為pages生成是根據根元素來的,根元素并不是我們實際要打印的元素,而是element,
            // 所以要把它修正,讓其值是以真實的打印元素頂部節點為準
            const newPages=pages.map((item)=> item - pages[0]);
          

          在線demo演示和源代碼

          上述即是在實現前端頁面生成pdf的過程中遇到的問題,以及解決思路。

          為了更直觀得感受效果,本文也給出了不同場景(單頁、多頁、多頁截斷、自定義頁眉頁腳、橫向)下的pdf生成效果,可以通過此鏈接體驗:https://pdf-demo-phi.vercel.app/

          此demo的源代碼如下:pdf-demo

          與現有文章不同的是,本倉庫的代碼特點在于:

          • 支持設置pdf打印的方向,比如橫向
          • 修正了高度計算問題,解決了多出一個空白頁問題。掘金那篇文章計算元素高度時候沒有減去容器距離頂部高度,所以導致很多新手使用那份代碼的時候,會發現自己的頁面頂部被裁剪到了,原因就是這個
          • 支持自定義頁眉頁腳
          • 支持擴展自定義分頁方法,如果遇到復雜的組件,可以自定擴展邏輯計算高度

          作者:燕平

          來源:微信公眾號:Goodme前端團隊

          出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA

          前端都會面臨的一個問題就是分頁,如果是純js分頁也是可以的,只是可能代碼量比較大,所以今天寫一個關于用bootstrap框架分頁的例子,希望以后可以幫助到一些對這方面比較頭疼的碼農。

          首先需要明確的一點是,哪些數據是需要分頁的,單從數據顯示上其實是沒有必要分頁的,因為頁面是可以顯示的出來的,但是作為一個相對比較合格的前端,你首先要考慮的不僅僅是這個功能是不是可以實現,而是要考慮用戶體驗是不是好的,在既有功能上如果可以更多的考慮用戶體驗的問題,那么才可以算是一個相對比較合格的前端工程師。

          先看渲染圖:


          這個是一個項目中的例子,今天就做以這個為例子,做一下

          首先我們將需要用的數據準備好(這個一般是ajax請求到的數據,現在我們直接放到一個js里面,加載js的時候直接取出數據)

          var testboke={
           "code":200,
           "message":null,
           "data":{
           "total":17,//總條數
           "size":10,//分頁大小-默認為0
           "pages":2,//總頁數
           "current":1,//當前頁數
           "records":[//author-riverLethe-double-slash-note數據部分
           {
           "id":17,//項目id
           "userName":"Night夜",//發起人名稱
           "companyName":"康佰裕",//發起人公司名稱
           "ptypeName":"13",//發起項目類別
           "pask":"13",
           "pname":"13",
           "pdesc":"13"
           },
           {
           "id":16,
           "userName":"Night夜",
           "companyName":"康佰裕",
           "ptypeName":"12",
           "pask":"12",
           "pname":"12",
           "pdesc":"12"
           },
           {
           "id":15,
           "userName":"BB機",
           "companyName":"北京電影",
           "ptypeName":"11",
           "pask":"11",
           "pname":"11",
           "pdesc":"11"
           },
           {
           "id":14,
           "userName":"BB機",
           "companyName":"北京電影",
           "ptypeName":"9",
           "pask":"9",
           "pname":"9",
           "pdesc":"9"
           },
           {
           "id":13,
           "userName":"BB機",
           "companyName":"北京電影",
           "ptypeName":"7",
           "pask":"7",
           "pname":"7",
           "pdesc":"7"
           },
           {
           "id":12,
           "userName":"Night夜",
           "companyName":"康佰裕",
           "ptypeName":"6",
           "pask":"6",
           "pname":"6",
           "pdesc":"6"
           },
           {
           "id":11,
           "userName":"BB機",
           "companyName":"北京電影",
           "ptypeName":"5",
           "pask":"5",
           "pname":"5",
           "pdesc":"5"
           },
           {
           "id":10,
           "userName":"Night夜",
           "companyName":"康佰裕",
           "ptypeName":"4",
           "pask":"4",
           "pname":"4",
           "pdesc":"4"
           },
           {
           "id":9,
           "userName":"BB機",
           "companyName":"北京電影",
           "ptypeName":"3",
           "pask":"3",
           "pname":"3",
           "pdesc":"3"
           },
           {
           "id":8,
           "userName":"Night夜",
           "companyName":"康佰裕",
           "ptypeName":"2",
           "pask":"2",
           "pname":"2",
           "pdesc":"2"
           }
           ]
           }
          }
          

          接下來畫頁面的表格:

          <body>
          			<div class="templatemo-content col-1 light-gray-bg">
          				<div class="templatemo-top-nav-container">
          					<div class="row">
          						<nav class="templatemo-top-nav col-lg-12 col-md-12">
          							<li>
          								<a href="">發起項目列表管理</a>
          							</li>
          						</nav>
          					</div>
          				</div>
          				<!--正文部分-->
          				<div style="background: #E8E8E8;height: 60rem;">
           
          					<div class="templatemo-content-container">
          						<div class="templatemo-content-widget no-padding">
          							<!--表頭-->
          							<div class="panel-heading templatemo-position-relative">
          								<h2 class="text-uppercase">發起項目列表</h2></div>
          							<div class="panel panel-default table-responsive" id="mainContent">
           
          							</div>
          						</div>
          					</div>
          				</div>
           
          				<div class="pagination-wrap" id="callBackPager">
          				</div>
          				<footer class="text-right">
          					<p>Copyright ? 2018 Company Name | Designed by
          						<a  target="_parent">csdn</a>
          					</p>
          				</footer>	
          	</body>
          

          這個時候也頁面上是沒有任何的元素的,因為我們需要的是將頁面上的表格用js動態的畫出來,這樣才可以實現取出來的數據是可以分頁的,但是畫表格的前提是你要可以拿到數據對不對,所以接下來應該是拿數據,而不是急著畫表格,因為沒有數據的時候你的表格即使是畫出來了,也是顯示不出來的,那么我們開始拿數據:

          我們寫一個函數取數據:

          /*將數據取出來*/
          		function data(curr, limit) {
          				//console.log("tot:"+totalCount)
          						/*拿到總數據*/
          				totalCount=testboke.data.total; //取出來的是數據總量
          				dataLIst=testboke.data.records; // 將數據放到一個數組里面(dataLIst 還未聲明,莫著急)
          				createTable(curr, limit, totalCount);
           console.log("tot:"+totalCount)
          		}
          

          拿到數據以后怎么做,分頁,是的,不是急著將數據放到表格里面,先分頁,ok我們加載分頁的js(bootstrap的分頁js)

          		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
          		<link href="../../css/bootstrap.min.css" rel="stylesheet" />
          		<link href="../../css/templatemo-style.css" rel="stylesheet" />
          		<link href="../../css/layui/css/layui.css" rel="stylesheet" />
          		
          		<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
          		<script src="../../js/jquery-1.8.3-min.js" type="text/javascript"></script>
          		<script src="../../js/jquery.min.js" type="text/javascript"></script>
          		<script src="../../js/extendPagination.js" type="text/javascript"></script>
          		<script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript"></script>
          		<!--引如測試數據的js-->
          		<script src="../../js/testcode.js" type="text/javascript"></script>
          

          上面的這些js,css都可以去cdn上面找到,除了testcode,在最上面,就是我們加載數據的js。

          下面就是將分頁的代碼寫上:

          var currPage=1;
          		var totalCount;
          		var dataLIst=[];
          		window.onload=function() {
          			/*取到總條數*/
          			/*每頁顯示多少條 10條*/
          			var limit=10;
          			data(currPage, limit)
          			//console.log(totalCount)
          			createTable(1, limit, totalCount);
          			$('#callBackPager').extendPagination({
          				totalCount: totalCount,
          				limit: limit,
          				callback: function(curr, limit, totalCount) {
          					data(curr, limit)
          				}
          			});
          		}
          

          加載以后的效果是這樣的:


          這個時候就是已經基本將數據處理好了,只是沒有將數據放進去,最后我們將數據放進去就可以了,(我的寫法不建議借鑒,很多現成的循環畫表格的方法,我是原生的拼接字符串寫的,不嫌麻煩的可以自己拼一下,畢竟不管是什么框架,最底層的還是這樣的實現原理)


          主站蜘蛛池模板: 日本亚洲成高清一区二区三区| 一区二区免费视频| 精品人妻少妇一区二区三区| 三上悠亚国产精品一区| 无码人妻一区二区三区av| 无码成人一区二区| 无码一区二区三区老色鬼| 日韩一区二区在线视频| 日韩一区二区久久久久久| 人妻无码久久一区二区三区免费 | 亚洲国产综合无码一区| 成人国产精品一区二区网站公司| 麻豆AV天堂一区二区香蕉| 久久久久久人妻一区二区三区 | 久久人妻内射无码一区三区| 国产色欲AV一区二区三区| 在线视频一区二区三区四区| 亚洲av无码成人影院一区| 亚拍精品一区二区三区| 中文字幕乱码一区久久麻豆樱花 | 日本高清一区二区三区| 中文字幕精品一区二区2021年 | 国产成人精品一区二区三区免费| 亚洲乱码av中文一区二区| 国产一区麻豆剧传媒果冻精品 | 精品国产一区二区三区在线观看| 一区二区三区在线|欧| 日韩在线一区二区三区视频| 一区二区在线电影| 精品国产一区二区三区在线观看| 亚洲AV综合色一区二区三区 | 日美欧韩一区二去三区| 精品女同一区二区三区在线 | 手机福利视频一区二区| 好湿好大硬得深一点动态图91精品福利一区二区| 国精产品一区一区三区有限在线| 亚洲熟女www一区二区三区| 国产成人一区二区精品非洲| 日本免费一区二区三区| 国产美女av在线一区| 亚洲高清一区二区三区电影|