今天分享下前兩天寫的小項目中的一部分效果，就是分頁顯示效果，這種對于擷取後端資料進行分頁顯示的效果很常見，代碼實作也不難，如何實作請聽我慢慢道來。
效果圖如下
開始之前我們要安裝下jQuery封裝的分頁插件
pagination.js
檔案，另外我們需要在html檔案中引入兩個檔案,如下圖：
第一個是引入
jQuery
，第二個是引入
jQuery
的分頁插件，之後就是js代碼和後端php代碼了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 正确顯示來源于網絡的圖檔 -->
<meta name="referrer" content="never">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/list.css">
</head>
<body>
<div class="page"></div>
<div class="container">
<ul>
</ul>
</div>
<script src="/jquery.min.js"></script>
<script src="../jquery-pagination//jquery.pagination.js"></script>
<script src="../js/list.js"></script>
</body>
</html>
js代碼
// 先擷取位址欄中資訊,了解需要檢視的是哪種分類，因為前面get方式擷取時後面拼接了這些參數
let str = decodeURIComponent(window.location.search);
// 去掉問号
str = str.substr(1);
const arr = str.split('=');
// 每頁顯示資料數量
let lineNum = 16;
// 第一次調用
getAjax(1);
// 發送ajax請求從後端擷取資料,第一次顯示第一頁的内容,
// 設定函數用來發送ajax請求,因為要多次請求,是以定義成函數
// 參數是請求的頁面,就是一頁顯示多少就請求多少資料
function getAjax(page) {
$.ajax({
url: '../php/goods_list.php',
// 傳入後端的參數
data: {
cat_one_id: arr[1], // 利用id分類找資料
page: page, // 目前頁數
line: lineNum, // 每頁顯示的資料數量
},
type: 'get',
dataType: 'json',
// 接收到響應體後執行的程式
success: function (res) {
// console.log(res);
let str = "";
res.forEach(function (item) {
str += `<li class="list-item">
<div class="panel panel-primary">
<div class="panel-body">
<ol class="breadcrumb">
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >${item.cat_one_id}</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >${item.cat_two_id}</a></li>
<li class="active">${item.cat_three_id}</li>
</ol>
</div>
<div class="panel-footer">
<div class="row">
<div>
<div class="thumbnail">
<img src="${item.goods_big_logo}"
alt="...">
<div class="caption">
<h3>${item.goods_name}</h3>
<p>
<i class="glyphicon glyphicon-yen"></i>
<span>${item.goods_price}</span>
</p>
<p><a href="javascript:;" target="_blank" rel="external nofollow" class="btn btn-primary" role="button">查找相似商品</a> <a
href="../pagess/detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">檢視商品詳情</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`;
})
$('ul').html(str);
// 資料太多要先分頁顯示,這裡利用插件分頁,設定分頁樣式
// 根據查詢結果進行分頁顯示
// 一頁至少有一個res[0]資料,存儲的有頁面資訊(目前頁數,總共資料數量,)
$('.page').pagination({
mode: 'fixed',
pageCount: res[0].sumPage,
totalData: res[0].row,
current: res[0].page,
showData: lineNum, // 每頁顯示的數量
activeCls: 'active', // 給點選的頁數按鈕添加樣式，就是個類名
coping: true,
homePage: '首頁',
endPage: '末頁',
prevContent: '上頁',
nextContent: '下頁',
// 插件定義的函數
callback: function (res) {
// 擷取點選分頁的目前頁數
let p = res.getCurrent();
// 上面得到的目前頁就是請求函數的參數,繼續發送請求
getAjax(p);
}
});
}
});
}
php代碼
<?php
// 這個是單獨在一個檔案裡寫的連接配接資料庫需要的配置資訊，寫在一個檔案裡容易修改
include_once './config.php';
// 根據前端的傳參,來執行資料庫查詢操作
// 将查詢結果的數組,以json串的形式傳回給前端
// 接收參數
$cat_one_id = $_GET['cat_one_id'];
$page = $_GET['page'];
$line = $_GET['line'];
$startLine = ($page - 1) * $line;
// 連結資料庫,執行查詢語句
// 通過目前需要顯示的頁數,和每頁的資料數量,可以計算起始資料的索引下标
// (目前頁-1) * 每頁的資料數量
$link = mysqli_connect($host, $user, $pwd, $dbname, $port);
// 分頁查詢部分
// 執行時的資料是前端傳參的資料,從下标startLine開始,每次找line個
$sql = "SELECT * FROM `goods` WHERE `cat_one_id` = '{$cat_one_id}' LIMIT {$startLine} , {$line} ";
$result = mysqli_query($link, $sql);
$arr = mysqli_fetch_all($result, MYSQLI_ASSOC);
// 需要PHP程式回報查詢資訊給前端内容
// 查詢所有的比對的資料數量
// 将count(*)的結果以num别名顯示出來，就像你的小名一樣
$sqlAll = "SELECT COUNT(*) as `num` FROM `goods` WHERE `cat_one_id` = '{$cat_one_id}' ";
// 傳回所有符合添加的結果
$stmtAll = mysqli_query($link, $sqlAll);
// 取出關聯數組的一行
$numArr = mysqli_fetch_assoc($stmtAll);
// 找到計算的總數量
$row = $numArr['num'];
// 根據資料總量和每頁的資料數量,可以計算總頁數
// 總頁數 = 總數量 / 每頁的資料數量 向上取整
$sumPage = ceil($row / $line);
// 給查到的所有結果添加屬性,屬性值是查詢的資料數量
for($i = 0 ; $i <= count($arr)-1 ; $i++){
$arr[$i]['row'] = $row; // 總數量
$arr[$i]['sumPage'] = $sumPage; // 總頁數
$arr[$i]['page'] = $page; // 目前頁數
}
// 隻有輸出前端才會收到資料
echo json_encode($arr);
// 關閉資料庫
mysqli_close($link);
js代碼和php一起看才能看懂，單獨看是不行的。具體思路就是根據前端輸入給後端的資料然後在資料庫中找到相應的資料，并給每組資料都添加上新的屬性輸出給前端。然後前端根據傳回的資料對應寫到頁面。
然後就是利用分頁插件進行資料請求，首先就是設定分頁插件屬性，使其顯示頁數和每頁資料數量，最後就是利用分頁插件的回調函數得到目前頁，也正好是請求資料函數的參數。