有时候项目中要求分页器样式自定义时，就需要自己去手写一个分页器了，怎么做呢，直接上代码，具体详情已经在注释里写清楚了。
注意：
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>
效果如下：
