tp5+ajax+jq實現無重新整理分頁
阿新 • • 發佈：2018-12-12
tp5框架裡面自帶有panigate()+rende()的方法可以超簡單的實現分頁，但是就是看著一直要重新整理很不爽，所以找了網上的好多程式碼，終於找到了一個邏輯簡單的無重新整理分頁，以下是我更改適合之後實現的效果
程式碼裡面有詳細註釋了，就不多說了，說明一下分頁查詢的原理吧：點選一個分頁按鈕，ajax向後端傳一個頁碼（curPage）引數，變換起始位置達到分頁的效果，然後通過查詢方法limit('起始位置','顯示數量'）查詢資料並渲染；
html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <style> #pageBar { text-align: right; padding: 0 20px 20px 0; } .pageBtn a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #ECECEC; color: black; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn-selected a { display: inline-block; border: 1px solid #aaa; padding: 2px 5px; margin: 0 3px; font-size: 13px; background: #187BBD; color: white; text-decoration: none; -moz-border-radius: 2px; -webkit-border-radius: 3px; } .pageBtn a:hover { background: #187BBD; color: white; } </style> <body> <div class="jumbotron"> <div id="data-area"> <ul> <!--這裡新增分頁資料--> </ul> </div> <div id="pageBar"><!--這裡新增分頁按鈕欄--></div> </body> <!--<script type="text/javascript" src="__STATIC__/index/jquery-3.2.1.min.js"></script>--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="__STATIC__/index/js/ajaxPage.js"></script> </html>
php程式碼（控制器）：
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
/**
* @return mixed
* 主頁
*/
public function index()
{
return $this->fetch();
}
/**
* @throws \think\db\exception\DataNotFoundException
*
ajaxPage.js程式碼：
var curPage; //當前頁數
var totalItem; //總記錄數
var pageSize; //每一頁記錄數
var totalPage; //總頁數
// curPage = getUrlParam('page')
/**
* 獲取url裡面的引數(name)!!!!個人私藏
*
**/
/* function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標引數的正則表示式物件
var r = window.location.search.substr(1).match(reg); //匹配目標引數
if (r != null)
return unescape(r[2]);
return null; //返回引數值
}*/
//獲取分頁資料
function turnPage(page) {
$.ajax({
type: 'get',
url: 'getPage', //這裡是請求的後臺地址，自己定義
data: {'curPage': page},
dataType: 'json',
beforeSend: function () {
$("#data-area ul").append("載入中...");
},
success: function (data) {
$("#data-area ul").empty(); //移除原來的分頁資料
totalItem = data.data.totalItem; // 返回的總記錄數
pageSize = data.data.pageSize; //返回的每一頁記錄數
curPage = page; //返回的當前頁碼
totalPage = data.data.totalPage; //返回的總頁數
console.log("totalItem:"+totalItem);
console.log("pageSize:"+pageSize);
console.log("curPage:"+curPage);
console.log("totalPage:"+totalPage);
var data_content = data.data.data_content; //返回的資料內容
console.log(data_content);
var data_html = ""; //資料輸出的html程式碼
//新增新的分頁資料（資料的顯示樣式根據自己頁面來設定，這裡只是一個簡單的列表）
$.each(data_content, function (index, array) {
data_html += "<li>" + array['id'] + " " + array['title'] + " " + array['article'] + " " + array['time'] + "</li>";
}); //遍歷資料，形成html程式碼
$("#data-area ul").append(data_html); //輸出html程式碼
getPageBar();
},
/* complete: function() { //新增分頁按鈕欄
getPageBar();
},*/
error: function () {
alert("資料載入失敗");
}
});
}
/* curPage; //當前頁數
totalItem; //總記錄數
pageSize; //每一頁記錄數
totalPage; //總頁數
*/
//獲取分頁條（分頁按鈕欄的規則和樣式根據自己的需要來設定）
function getPageBar() {
//防止資料錯誤時候出現當前頁數大於總頁數
if (curPage > totalPage) {
curPage = totalPage;
}
//防止資料錯誤時候出現當前頁數小於第一頁
if (curPage < 1) {
curPage = 1;
}
//定義分頁按鈕html程式碼
pageBar = "";
//如果不是第一頁
if (curPage != 1) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'>上一頁</a></span>";
}
//顯示的頁碼按鈕(5個)
//定義start 和end兩個變數準備迴圈輸出可見的分頁按鈕
var start, end;
if (totalPage <= 5) {
start = 1;
end = totalPage;
} else {
//當前頁碼與總頁數相差1個的時候，要顯示之前的頁碼
if (totalPage - curPage < 2) {
start = totalPage - 4;
end = totalPage;
} else {
//顯示前面兩個和後面兩個
start = curPage - 2;
end = curPage + 2;
}
}
//迴圈輸出分頁按鈕
for (var i = start; i <= end; i++) {
if (i == curPage) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + i + ")'>" + i + "</a></span>";
}
}
//如果不是最後頁,顯示輸出“下一頁 ， 末頁”
if (curPage != totalPage) {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")'>下一頁</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(" + totalPage + ")'>末頁</a></span>";
}
//匹配改變pageBar裡面的內容
$("#pageBar").html(pageBar);
}
//頁面載入時初始化分頁
$(function () {
turnPage(1);
});