原生分頁的思路（原理）：
首先和產(chǎn)品經(jīng)理定一下每頁顯示多少條目，
- 然后通過后臺的某一個數(shù)據(jù)接口，獲取某一頁的數(shù)據(jù)（需要給這個接口傳入頁碼這個參數(shù)），
- 咱們僅僅需要去如何顯示數(shù)據(jù)即可。
- 術(shù)語：頁碼、每頁顯示條目、數(shù)據(jù)總數(shù)、每頁數(shù)據(jù)列表
- 其中 每頁顯示條目是動態(tài)的（咱們這個demo暫時定義為每頁顯示5條數(shù)據(jù)）
- 總數(shù)是接口里提供的，頁碼數(shù)需要根據(jù)總數(shù)和每頁條目數(shù) 去計算的
//全局緩存所有數(shù)據(jù)（為了計算某一頁的數(shù)據(jù)，注意：將來真實開發(fā)不需要這么做）
var personsList = null;
//全局緩存數(shù)據(jù)總條數(shù)（select count(*) from person ）
var totalCount = 0;
//當(dāng)前頁碼
var currentPageNo = 1;
//計算有多少頁（初始化頁碼按鈕）
function initBtn () {
$.getJSON('data.json', null, function (resultData) {
console.log(resultData);
//緩存到本地
personsList = resultData.persons;
totalCount = resultData.totalCount;
//定義模板字符串
var str = ``;
//頁碼個數(shù)（頁碼按鈕） = 向上取整(數(shù)據(jù)總數(shù) / 每頁條目（默認(rèn)5條）)
for (var i = 1; i <= Math.ceil(totalCount / 5); i++) {
//創(chuàng)建頁碼按鈕
if (i == 1) {
str += `<a href="###" name="p" style="background:orange;color:#fff;">${ i }</a>`;
} else {
str += `<a href="###" name="p" >${ i }</a>`;
}
}
$('.prev').after(str);
//給所有按鈕辦定事件
$('.fenye a').on('click', fenyeFn);
//默認(rèn)顯示第一頁的數(shù)據(jù)
showData(currentPageNo);
});
}
initBtn();
//構(gòu)建某一頁的數(shù)據(jù)
function showData (pageNo) {
//這里是為了模擬后臺操作，去匹配某一頁的數(shù)據(jù)，將來真實開發(fā)不需要寫以下這個算法
var currentArr = personsList.slice((pageNo - 1) * 5, pageNo * 5);
// console.log(currentArr);
var str = ``;
for (var tempPerson of currentArr) {
str += `<tr>
<td>${ tempPerson.name }</td>
<td>${ tempPerson.sex }</td>
<td>${ tempPerson.age }</td>
<td>${ tempPerson.addr }</td>
</tr>`;
}
$('tbody').html(str);
}
//分頁按鈕點擊邏輯
function fenyeFn () {
//1、處理頁碼數(shù)的邏輯
// console.log($(this).html());
switch ($(this).html()) {
case '首頁':
currentPageNo = 1;
break;
case '<<上一頁':
currentPageNo--;
break;
case '下一頁>>':
currentPageNo++;
break;
case '尾頁':
currentPageNo = Math.ceil(totalCount / 5);
break;
default:
currentPageNo = parseInt($(this).html());
}
console.log(currentPageNo);
//2、處理首尾、上下按鈕的隱藏顯示邏輯
if (currentPageNo == 1) {
$('.start').css('display', 'none');
$('.prev').css('display', 'none');
} else {
$('.start').css('display', 'inline-block');
$('.prev').css('display', 'inline-block');
}
if (currentPageNo == Math.ceil(totalCount / 5)) {
$('.end').css('display', 'none');
$('.next').css('display', 'none');
} else {
$('.end').css('display', 'inline-block');
$('.next').css('display', 'inline-block');
}
//3、處理按鈕顏色的邏輯
//獲取頁碼按鈕
var $pageBtn = $('[name=p]');
//先把這幾個按鈕的樣式還原成默認(rèn)
$pageBtn.css({
background : '#fff',
color : '#999'
});
//然后在處理當(dāng)前頁碼數(shù)對應(yīng)的按鈕樣式
$pageBtn[currentPageNo - 1].style.background = 'orange';
$pageBtn[currentPageNo - 1].style.color = '#fff';
//4、顯示數(shù)據(jù)
showData(currentPageNo);
}
上面的部分：
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="lib/jquery.js" ></script>
截屏效果圖
<body>
<table id="my_table" border="1px">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>住址</th>
</tr>
</thead>
<tbody>
<!--<tr>
<td>劉升升</td>
<td>男</td>
<td>18</td>
<td>二撥子新村</td>
</tr>
<tr>
<td>劉升升</td>
<td>男</td>
<td>18</td>
<td>二撥子新村</td>
</tr>
<tr>
<td>劉升升</td>
<td>男</td>
<td>18</td>
<td>二撥子新村</td>
</tr>
<tr>
<td>劉升升</td>
<td>男</td>
<td>18</td>
<td>二撥子新村</td>
</tr> -->
</tbody>
</table>
<div class="fenye">
<a href="###" class="start">首頁</a>
<a href="###" class="prev"><<上一頁</a>
<!--<a href="###" name="p" style="background:orange;color:#fff;">1</a>
<a href="###" name="p" >2</a>
<a href="###" name="p" >3</a>-->
<a href="###" class="next">下一頁>></a>
<a href="###" class="end" >尾頁</a>
</div>