整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
上一章節(jié)中，我們?yōu)閣ordpress網(wǎng)站的首頁(yè)添加了全站文章列表。一個(gè)wordpress網(wǎng)站不可能只有幾篇文章，可能會(huì)有成千上萬(wàn)的文章，作為一個(gè)wordpress博客主題模板，一般情況下，不可能讓所有的文章在一個(gè)頁(yè)面一下子全部顯示出來(lái)，如果真這樣，網(wǎng)頁(yè)的負(fù)載會(huì)非常大。正確的處理方式，是先顯示最前面的十幾篇或二十幾篇文章，然后，“點(diǎn)擊一個(gè)分頁(yè)按鈕”或者“鼠標(biāo)向下滾動(dòng)觸發(fā)一個(gè)事件”后，再顯示后面的十幾篇或二十幾篇文章，以此類(lèi)推。本節(jié)，我們來(lái)介紹“如何給wordpress網(wǎng)站的文章列表添加分頁(yè)效果”，一起來(lái)看看吧。
在wordpress網(wǎng)站模板的functions.php文件中添加如下代碼：
//分頁(yè)函數(shù)function pages($query_string){
global $posts_per_page, $paged; //全局變量
$my_query=new WP_Query($query_string ."&posts_per_page=-1"); //創(chuàng)建查詢(xún)對(duì)象
$total_posts=$my_query->post_count; //通過(guò)查詢(xún)對(duì)象獲取文章總數(shù)
if(empty($paged)) $paged=1; //當(dāng)前頁(yè)碼數(shù)，如是$paged為空，就讓
$paged=1$prev=$paged - 1; //上一頁(yè)變量
$next=$paged + 1; //下一頁(yè)變量
$range=4; //
$showitems=($range * 2)+1; //顯示多少個(gè)分頁(yè)頁(yè)碼按鈕
$pages=ceil($total_posts/$posts_per_page); //獲取總頁(yè)數(shù)
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)."'>上一頁(yè)</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)."'>下一頁(yè)</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";echo "</div>\n";
}
}
然后，在wordpress網(wǎng)站前臺(tái)模板的文章列表的代碼下方調(diào)用這個(gè)分頁(yè)函數(shù)，代碼如下：
<?php pages($query_string); //列表分頁(yè) ?>
然后，我們就可以在wordpress網(wǎng)站的文章列表下方看到分頁(yè)按鈕。如果想要樣式好看一點(diǎn)，可以對(duì)分頁(yè)按鈕添加CSS樣式，來(lái)進(jìn)行美化一下。
為了更方便wordpress網(wǎng)站模板開(kāi)發(fā)者開(kāi)發(fā)模板主題，wordpress從4.0版本開(kāi)始，就提供了一個(gè)分頁(yè)函數(shù)the_posts_pagination()，通過(guò)這個(gè)函數(shù)，我們同樣可能實(shí)現(xiàn)wordpress網(wǎng)站的文章列表的分頁(yè)效果。代碼如下：
the_posts_pagination( array('mid_size'=> 3, //當(dāng)前頁(yè)碼數(shù)的 兩邊 顯示幾個(gè)頁(yè)碼。'prev_text'=>'<', //上一頁(yè)'next_text'=>'>', //下一南) );
這個(gè)函數(shù)跟wordpress其wp_list_pages()等函數(shù)類(lèi)似，有一個(gè)參數(shù)，這個(gè)參數(shù)可是一個(gè)數(shù)組類(lèi)型（如上面的代碼，參數(shù)就是數(shù)組類(lèi)型），也可以是一個(gè)字符串類(lèi)型，上面的的代碼的參數(shù)修改成字符串類(lèi)型后，如下：
the_posts_pagination("mid_size=3&prev_text=<&next_text=>");
是使用字符串類(lèi)型，還是使用數(shù)組類(lèi)型，主要根據(jù)開(kāi)發(fā)者的個(gè)人愛(ài)好，我個(gè)人還是比較喜歡用數(shù)組類(lèi)型，看起來(lái)比較清楚。
在wordpress網(wǎng)站模板開(kāi)發(fā)中，使用上面任何一種方式來(lái)添加文章列表的分頁(yè)效果都可以，不過(guò)，我個(gè)人還是建議使用wordpress自帶的函數(shù)the_posts_pagination()，對(duì)開(kāi)發(fā)更省事，效率更高，而且是wordpress自己的函數(shù)，后期都不需要維護(hù)。如果想讓分頁(yè)按鈕布局更加個(gè)性化，可以考第一種方式。
如果還有什么不太明白的，或者你想了解什么，可以在下面評(píng)論中給我留言。
最近在業(yè)務(wù)上遇到了一個(gè)問(wèn)題是要將頁(yè)面打印輸出成pdf文件，通過(guò)點(diǎn)擊一個(gè)按鈕，就能夠?qū)㈨?yè)面寫(xiě)在一個(gè)pdf上，并下載下來(lái)，需要保證pdf的內(nèi)容具有很好的可讀性。
經(jīng)評(píng)估要實(shí)現(xiàn)這個(gè)需求，一種可行的方案是將HTML頁(yè)面轉(zhuǎn)為PDF，并實(shí)現(xiàn)下載。通過(guò)技術(shù)調(diào)研，最終的方案確定為通過(guò)html2canvas + jspdf這兩個(gè)庫(kù)來(lái)實(shí)現(xiàn)，通過(guò)使用html2canvas提供的方法，將頁(yè)面元素轉(zhuǎn)為base64圖片流，然后將其插入jspdf插件中，實(shí)現(xiàn)保存并下載pdf。
html2canvas + jspdf方案是前端實(shí)現(xiàn)頁(yè)面打印的一種常用方案，但是在實(shí)踐過(guò)程中，遇到的最大問(wèn)題就是分頁(yè)截?cái)?/strong>的問(wèn)題：當(dāng)頁(yè)面元素超過(guò)一頁(yè)A4紙的時(shí)候，連續(xù)的頁(yè)面就會(huì)因?yàn)榉猪?yè)而導(dǎo)致內(nèi)容被截?cái)啵M(jìn)而影響了pdf的可讀性。
由于網(wǎng)上關(guān)于分頁(yè)截?cái)嗟慕鉀Q思路比較少，所以特意將此次的解決方案記錄下來(lái)。
首先，我們開(kāi)始使用 JSPDF 和 html2canvas 生成一個(gè)簡(jiǎn)單的 PDF文件。
創(chuàng)建一個(gè) JSPDF 實(shí)例，設(shè)置頁(yè)面的大小、方向和其他參數(shù)。參考官網(wǎng)可以寫(xiě)一個(gè)很簡(jiǎn)單的實(shí)例
var doc=new jsPDF({
orientation: 'landscape',
unit: 'in',
format: [4, 2]
}
doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')
生成一個(gè)pdf文件，并且在文件中寫(xiě)入一定內(nèi)容，其實(shí)JSPDF這個(gè)庫(kù)就能做到。
但是很多業(yè)務(wù)場(chǎng)景下，我們的目標(biāo)內(nèi)容會(huì)更復(fù)雜，而且還要考慮樣式，所以最好的方式是引入html2canvas這個(gè)庫(kù)，將頁(yè)面元素轉(zhuǎn)換成base64數(shù)據(jù)，然后貼在pdf中(使用addImage方法），這樣就能保證頁(yè)面的內(nèi)容。
引入了html2canvas庫(kù)后，我們更多關(guān)注是利用現(xiàn)成組件庫(kù)、框架或者原生html和css實(shí)現(xiàn)更復(fù)雜的頁(yè)面內(nèi)容。
使用 html2canvas 捕捉 HTML 內(nèi)容或特定的 HTML 元素，并將其轉(zhuǎn)換為 Canvas。其中，html2canvas 函數(shù)的主要用法是：
html2canvas(element, options);
以下是一些常見(jiàn)的配置選項(xiàng)：
下面是一個(gè)簡(jiǎn)單的demo，可以看到html2canvas能夠?qū)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">dom元素轉(zhuǎn)化為一張base64圖片，將鼠標(biāo)選中元素，可以感受到圖片和文字的不同。
<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
這一步我們需要使用JSPDF 的addImage方法，其語(yǔ)法如下：
addImage(imageData, format, x, y, width, height, alias, compression)
下面是一串示例代碼：
import jsPDF from 'jspdf';
export default function addImageUsage() {
const doc=new jsPDF();
const imageData=【替換成base64數(shù)據(jù)流】;
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 文檔（默認(rèn)是A4紙大小，寬高為[595.28, 841.89]像素）的 (10, 10) 、(100, 100) 、(200, 200) 坐標(biāo)處，添加一張png 圖像。圖像的寬度和高度將分別為 10 和 10 像素，為了了解pdf中的坐標(biāo)系統(tǒng)，此示例還在pdf文檔中生成了間距為10px的網(wǎng)格系統(tǒng)。
了解了上面的三個(gè)關(guān)鍵點(diǎn)，接下來(lái)我們將這三個(gè)步驟串聯(lián)起來(lái)，實(shí)現(xiàn)一個(gè)基本的html→pdf的方案。大致步驟如下：
基于這5個(gè)步驟，可以實(shí)現(xiàn)基本的頁(yè)面打印。
import html2canvas from 'html2canvas';
import jsPDF, { RGBAData } from 'jspdf';
// 將元素轉(zhuǎn)化為canvas元素
// 通過(guò) 放大 提高清晰度
// width為內(nèi)容寬度
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轉(zhuǎn)化后的寬高
const { width: canvasWidth, height: canvasHeight }=canvas;
// 轉(zhuǎn)化成圖片Data
const canvasData=canvas.toDataURL('image/jpeg', 1.0);
return { width: canvasWidth, height: canvasHeight, data: canvasData };
}
/**
* 生成pdf(A4多頁(yè)pdf截?cái)鄦?wèn)題， 包括頁(yè)眉、頁(yè)腳 和 上下左右留空的護(hù)理)
*/
export async function generatePDF({
/** pdf內(nèi)容的dom元素 */
element,
/** pdf文件名 */
filename
}) {
if (!(element instanceof HTMLElement)) {
return;
}
const pdf=new jsPDF();
// 一頁(yè)的高度， 轉(zhuǎn)換寬度為一頁(yè)元素的寬度
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);
}
通常，在我們的實(shí)踐中，會(huì)發(fā)現(xiàn)2個(gè)問(wèn)題：
這兩個(gè)問(wèn)題的解決方案是等比例縮放+循環(huán)移位：
通過(guò)比例縮放，實(shí)現(xiàn)頁(yè)面內(nèi)容等比例展示在pdf文檔中
令頁(yè)面元素的寬高為x, y（轉(zhuǎn)化成canvas圖片的寬高），pdf文檔的寬高為w, h。因?yàn)楦叨瓤梢酝ㄟ^(guò)加頁(yè)延伸，所以可以按照寬度進(jìn)行縮放，縮放后的圖片高度可以通過(guò)下列公式計(jì)算
如果頁(yè)面的高度超出了pdf文檔的高度，即y > h，使用addPage方法添加一頁(yè)即可。但是在新的一頁(yè)中，我們的圖片內(nèi)容的高度需要調(diào)整。
假設(shè)y=2 * h，這意味我們需要兩頁(yè)才能完整得展示頁(yè)面內(nèi)容。在一頁(yè)pdf中，圖片在起始位置插入即可，即
PDF.addImage(pageData, 'JPEG', 0, 0, x, y)// 注意x,y 是縮放后的大小
在第二頁(yè)pdf中，圖片的縱向位置需要調(diào)整一頁(yè)pdf的高度，即
PDF.addImage(pageData, 'JPEG', 0, -h, x, y)// 注意x,y 是縮放后的大小
通過(guò)循環(huán)計(jì)算剩余高度，然后不停調(diào)整縱向位置移動(dòng)base64的圖片位置，可以解決多頁(yè)的問(wèn)題。
盡管 JSPDF 和 html2canvas 是功能強(qiáng)大的工具，但是他們也有很多槽點(diǎn)，比如得手動(dòng)分頁(yè)，手動(dòng)處理分頁(yè)截?cái)嗟膯?wèn)題。等你實(shí)踐到這一步，就開(kāi)始面臨分頁(yè)截?cái)嗟膯?wèn)題，類(lèi)似的問(wèn)題也有網(wǎng)友在Github上提出，但是底下依然沒(méi)有很好的解決思路。
好在掘金上有人分享了一個(gè)不錯(cuò)的方法：
jsPDF + html2canvas A4分頁(yè)截?cái)?完美解決方案（含代碼 + 案例） - 掘金
概括一下，其處理分頁(yè)截?cái)嗟脑砭褪窃谑褂?/span>addImage之前，將html進(jìn)行分頁(yè)，通過(guò)維護(hù)一個(gè)高度位置數(shù)據(jù)，來(lái)記錄每次循環(huán)迭代addImage的位置。
從高到低遍歷維護(hù)一個(gè)分頁(yè)數(shù)組pages，該數(shù)組記錄每一頁(yè)的起始位置，如：pages[0] 對(duì)應(yīng) 第一頁(yè)起始位置，pages[1] 對(duì)應(yīng)第二頁(yè)起始位置
Untitled2.png
接下來(lái)我們重點(diǎn)討論如何將頁(yè)面進(jìn)行切割，然后生成pages這個(gè)數(shù)組。
假設(shè)頁(yè)面的高度是1500，pdf寬高是[500, 900]，如果不用處理分頁(yè)截?cái)嗟膯?wèn)題，我們可以想到第一頁(yè)（0-900）是用來(lái)承載頁(yè)面從高度為0到900的信息；
第二頁(yè)（900-1800）是用來(lái)承載頁(yè)面從高度900到1500的，所以pages數(shù)組為[0, 900]。
如果要處理分頁(yè)截?cái)嗄兀@時(shí)候就需要計(jì)算頁(yè)面元素的距離pdf文檔起始位置的高度h1，以及該元素的內(nèi)部高度h2，通過(guò)這兩個(gè)高度來(lái)判斷這個(gè)元素要不要放在下一頁(yè)，防止截?cái)啵疽鈭D如下：
Untitled4.png
如果h1 + h2 > 頁(yè)面高度， 這時(shí)候說(shuō)明這個(gè)元素不處理的就會(huì)被分頁(yè)截?cái)啵詰?yīng)該要把這個(gè)元素放到第二頁(yè)去渲染，這就意味著pages記錄的數(shù)據(jù)要變化，示意圖如下，可以看到pages[1]我們往上調(diào)整了，比第二頁(yè)pdf的起始位置更高。
Untitled5.png
說(shuō)明渲染第二頁(yè)pdf的時(shí)候，要從h1開(kāi)始渲染，pages數(shù)組為[0, h1]，解釋為第一頁(yè)pdf渲染頁(yè)面高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">0-900, 第二頁(yè)pdf渲染html高度區(qū)域?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1-1500。注意到第一頁(yè)渲染的時(shí)候到尾部的時(shí)候，會(huì)有部分內(nèi)容和第二頁(yè)頭部?jī)?nèi)容重合。因?yàn)?span style="color: #EF7060; --tt-darkmode-color: #EF7060;">h1到900這部分的內(nèi)容肯定會(huì)渲染，這部分內(nèi)容一直都是頁(yè)面元素，我們改變pages[1]的值的原因只是創(chuàng)建一個(gè)副本，讓頁(yè)面看起來(lái)內(nèi)容沒(méi)有被截?cái)唷?/p>
為了解決這個(gè)問(wèn)題（為了美觀），我們用填充一塊白色區(qū)域遮掉它！此處使用jspdf的rect和setFillColor方法，把重合的區(qū)域遮白處理。
pdf.setFillColor(255, 255, 255);
pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F');
上面我們談到了h1和h2，其中h1是元素盒子的上邊距到打印區(qū)域的高度（比例縮放后的高度），h2是元素盒子的內(nèi)部高度。
計(jì)算h1: getBoundingClientRect方法
const rect=contentElement.getBoundingClientRect() || {};
const topDistance=rect.top;
return topDistance;
Untitled6.png
計(jì)算h2：offsetHeight方法
Untitled7.png
值得注意的是，因?yàn)榇蛴^(qū)域的html元素不一定是從窗口頂部開(kāi)始，所以為了計(jì)算實(shí)際的h1(元素到打印區(qū)域的頂部距離），可以采用這樣的方法：
// 對(duì)pages進(jìn)行一個(gè)值的修正，因?yàn)閜ages生成是根據(jù)根元素來(lái)的，根元素并不是我們實(shí)際要打印的元素，而是element，
// 所以要把它修正，讓其值是以真實(shí)的打印元素頂部節(jié)點(diǎn)為準(zhǔn)
const newPages=pages.map((item)=> item - pages[0]);
上述即是在實(shí)現(xiàn)前端頁(yè)面生成pdf的過(guò)程中遇到的問(wèn)題，以及解決思路。
為了更直觀得感受效果，本文也給出了不同場(chǎng)景（單頁(yè)、多頁(yè)、多頁(yè)截?cái)唷⒆远x頁(yè)眉頁(yè)腳、橫向）下的pdf生成效果，可以通過(guò)此鏈接體驗(yàn)：https://pdf-demo-phi.vercel.app/
此demo的源代碼如下：pdf-demo
與現(xiàn)有文章不同的是，本倉(cāng)庫(kù)的代碼特點(diǎn)在于：
作者:燕平
來(lái)源:微信公眾號(hào):Goodme前端團(tuán)隊(duì)
出處:https://mp.weixin.qq.com/s/-1nA-VI6kmgqHRcYs_NZFA
前端都會(huì)面臨的一個(gè)問(wèn)題就是分頁(yè)，如果是純js分頁(yè)也是可以的，只是可能代碼量比較大，所以今天寫(xiě)一個(gè)關(guān)于用bootstrap框架分頁(yè)的例子，希望以后可以幫助到一些對(duì)這方面比較頭疼的碼農(nóng)。
首先需要明確的一點(diǎn)是，哪些數(shù)據(jù)是需要分頁(yè)的，單從數(shù)據(jù)顯示上其實(shí)是沒(méi)有必要分頁(yè)的，因?yàn)轫?yè)面是可以顯示的出來(lái)的，但是作為一個(gè)相對(duì)比較合格的前端，你首先要考慮的不僅僅是這個(gè)功能是不是可以實(shí)現(xiàn)，而是要考慮用戶體驗(yàn)是不是好的，在既有功能上如果可以更多的考慮用戶體驗(yàn)的問(wèn)題，那么才可以算是一個(gè)相對(duì)比較合格的前端工程師。
先看渲染圖：
這個(gè)是一個(gè)項(xiàng)目中的例子，今天就做以這個(gè)為例子，做一下
首先我們將需要用的數(shù)據(jù)準(zhǔn)備好（這個(gè)一般是ajax請(qǐng)求到的數(shù)據(jù)，現(xiàn)在我們直接放到一個(gè)js里面，加載js的時(shí)候直接取出數(shù)據(jù)）
var testboke={
"code":200,
"message":null,
"data":{
"total":17,//總條數(shù)
"size":10,//分頁(yè)大小-默認(rèn)為0
"pages":2,//總頁(yè)數(shù)
"current":1,//當(dāng)前頁(yè)數(shù)
"records":[//author-riverLethe-double-slash-note數(shù)據(jù)部分
{
"id":17,//項(xiàng)目id
"userName":"Night夜",//發(fā)起人名稱(chēng)
"companyName":"康佰裕",//發(fā)起人公司名稱(chēng)
"ptypeName":"13",//發(fā)起項(xiàng)目類(lèi)別
"pask":"13",
"pname":"13",
"pdesc":"13"
},
{
"id":16,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"12",
"pask":"12",
"pname":"12",
"pdesc":"12"
},
{
"id":15,
"userName":"BB機(jī)",
"companyName":"北京電影",
"ptypeName":"11",
"pask":"11",
"pname":"11",
"pdesc":"11"
},
{
"id":14,
"userName":"BB機(jī)",
"companyName":"北京電影",
"ptypeName":"9",
"pask":"9",
"pname":"9",
"pdesc":"9"
},
{
"id":13,
"userName":"BB機(jī)",
"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機(jī)",
"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機(jī)",
"companyName":"北京電影",
"ptypeName":"3",
"pask":"3",
"pname":"3",
"pdesc":"3"
},
{
"id":8,
"userName":"Night夜",
"companyName":"康佰裕",
"ptypeName":"2",
"pask":"2",
"pname":"2",
"pdesc":"2"
}
]
}
}
接下來(lái)畫(huà)頁(yè)面的表格：
<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="">發(fā)起項(xiàng)目列表管理</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">發(fā)起項(xiàng)目列表</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>
這個(gè)時(shí)候也頁(yè)面上是沒(méi)有任何的元素的，因?yàn)槲覀冃枰氖菍㈨?yè)面上的表格用js動(dòng)態(tài)的畫(huà)出來(lái)，這樣才可以實(shí)現(xiàn)取出來(lái)的數(shù)據(jù)是可以分頁(yè)的，但是畫(huà)表格的前提是你要可以拿到數(shù)據(jù)對(duì)不對(duì)，所以接下來(lái)應(yīng)該是拿數(shù)據(jù)，而不是急著畫(huà)表格，因?yàn)闆](méi)有數(shù)據(jù)的時(shí)候你的表格即使是畫(huà)出來(lái)了，也是顯示不出來(lái)的，那么我們開(kāi)始拿數(shù)據(jù)：
我們寫(xiě)一個(gè)函數(shù)取數(shù)據(jù)：
/*將數(shù)據(jù)取出來(lái)*/
function data(curr, limit) {
//console.log("tot:"+totalCount)
/*拿到總數(shù)據(jù)*/
totalCount=testboke.data.total; //取出來(lái)的是數(shù)據(jù)總量
dataLIst=testboke.data.records; // 將數(shù)據(jù)放到一個(gè)數(shù)組里面（dataLIst 還未聲明，莫著急）
createTable(curr, limit, totalCount);
console.log("tot:"+totalCount)
}
拿到數(shù)據(jù)以后怎么做，分頁(yè)，是的，不是急著將數(shù)據(jù)放到表格里面，先分頁(yè)，ok我們加載分頁(yè)的js（bootstrap的分頁(yè)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> <!--引如測(cè)試數(shù)據(jù)的js--> <script src="../../js/testcode.js" type="text/javascript"></script>
上面的這些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我們加載數(shù)據(jù)的js。
下面就是將分頁(yè)的代碼寫(xiě)上：
var currPage=1;
var totalCount;
var dataLIst=[];
window.onload=function() {
/*取到總條數(shù)*/
/*每頁(yè)顯示多少條 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)
}
});
}
加載以后的效果是這樣的：
這個(gè)時(shí)候就是已經(jīng)基本將數(shù)據(jù)處理好了，只是沒(méi)有將數(shù)據(jù)放進(jìn)去，最后我們將數(shù)據(jù)放進(jìn)去就可以了，（我的寫(xiě)法不建議借鑒，很多現(xiàn)成的循環(huán)畫(huà)表格的方法，我是原生的拼接字符串寫(xiě)的，不嫌麻煩的可以自己拼一下，畢竟不管是什么框架，最底層的還是這樣的實(shí)現(xiàn)原理）
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
