有時候項目中要求分頁器樣式自定義時，就需要自己去手寫一個分頁器了，怎麼做呢，直接上代碼，具體詳情已經在註釋裏寫清楚了。
注意：
1. currentPage、count、pageCount爲全局變量
2. downloadData()函數第一次執行時，並不去進行if語句判斷，自己看代碼時可以直接從ajax請求看，因爲if判斷語句時在第二次執行時，也就是點擊頁碼元素，進行回調時才執行的。
3.downloadData(currentPage) 這個函數執行時，第一次傳進去的是1。
我只用到了接口js文件和jquery的js文件，邏輯處理全部爲自己手寫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
padding: 0;
}
.pagination-box li.active{
background-color: #ccc;
}
.pagination-box{
display: flex;
}
.pagination-box li{
border: 1px solid black;
padding: 3px;
margin-left: 3px;
cursor:pointer;
}
</style>
</head>
<body>
<section>
<ul class="tableview">
</ul>
<ul class="pagination-box">
</ul>
</section>
<script src="js/interface.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//定義當前頁爲1
var currentPage = 1;
//一頁顯示10條數據
var count = 10;
//總頁數默認爲0
var pageCount = 0;
// 下載數據，有一個形參，第一次執行函數時傳進來的是1，在點擊點擊頁碼回調函數時表示拿到的頁碼元素的id值，
function downloadData(page) {
// 一下if語句都是在回調時候才判斷的，
// 首先定義一個新頁面變量，把拿到的元素標籤的id值賦給這個newPage
var newPage = 0;
//first 表示點擊的是首頁這個標籤
if (page == 'first') {
// 把1賦給newPage
newPage = 1
}
//last 末頁
else if (page == 'last') {
// 把最後一頁賦給newPage 此時的 pageCount已經從數據中計算出總頁碼了
newPage = pageCount
}
//prev 上一頁
else if (page == 'prev') {
// 把當前頁減去1
newPage = currentPage - 1
// 如果當前頁-1小於1，則等於1
if (newPage < 1) {
newPage = 1
}
}
//next 下一頁
else if (page == 'next') {
newPage = currentPage + 1
// 如果當前頁+1大於總頁數，則等於總頁數
if (newPage > pageCount) {
newPage = pageCount
}
}
//1~6 點擊1~6時候，直接把拿到的id值，傳給newPage即可，就是表示要跳轉的頁數
else {
newPage = page
}
// 如果總頁數不爲0 並且 新頁碼等於當前頁碼，退出 也就是在第二頁時，你又點了一下2，則不做任何操作
if (pageCount != 0 && newPage == currentPage) {
console.log("頁面未變")
return
}
// 把新頁碼，賦給當前頁碼 當第一次加載DOM層結構時，傳進來的是1，所這句話以及上面的if都沒執行
currentPage = newPage
// start變量表示url接口裏的start數據，表示開始頁 因爲第一頁接口裏我定義的start = 0，通過currentPage計算出來就行了
var start = (currentPage - 1) * count
// url接口
var url = readListUrl + "&start=" + start + "&count=" + count
// console.log("url =" + url)
// ajax請求
$.getJSON(url, {}, function(data) {
// console.log(data)
var list = data.data
//顯示內容 遍歷數據顯示在頁面上
var htmlContent = ""
for (var index in list) {
var item = list[index]
htmlContent += "<li>" + item.title + "</li>"
}
$(".tableview").html(htmlContent)
// 計算總頁數 通過接口裏的total值去計算
var total = data.total
pageCount = Math.ceil(total / count)
// console.log("pageCount=" + pageCount)
//頁碼的html
$(".pagination-box").html("")
$(".pagination-box").append("<li id='first'>首頁</li>")
$(".pagination-box").append("<li id='prev'>上一頁</li>")
//遍歷頁碼li
for (var i = 1; i <= pageCount; i++) {
//當前頁等於第i個頁碼時，給這個頁碼li標籤添加一個樣式爲active，變色
if (i == currentPage) {
$(".pagination-box").append("<li id='" + i + "' class='active'>" + i + "</li>")
} else {
$(".pagination-box").append("<li id='" + i + "' >" + i + "</li>")
}
}
$(".pagination-box").append("<li id='next'>下一頁</li>")
$(".pagination-box").append("<li id='last'>尾頁</li>")
//添加點擊事件
$(".pagination-box li").on("click", function() {
// 當點擊哪一個的時候，拿到頁碼li的id，傳出去，
var id = $(this).attr("id")
// console.log("click id=" + id)
// 這時候又去回調這個函數，就會執行if語句了，
downloadData(id)
})
})
}
downloadData(currentPage)
</script>
</body>
</html>
效果如下：
