前端分页导航制作
前言：
1.本案例是讲分页导航的，包括上一页，下一页，还有页码导航的
2.用ajax+php+js+mysql去做的
环境介绍：
MySql、XAMPP、VSCode
语言介绍：
ES5、ES6、html、css、javascript、jQuery、ajax、php
一、输入mysql语句部分
代码如下：goods表
CREATE TABLE IF NOT EXISTS `goods` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`title` varchar(80) NOT NULL,
`pic` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;说明：数据库的数据可以自己输入，比如说看我的随意数据
二、PHP部分
代码1：php链接mysql（这个部分是通过面向对象的方法链接的），文件名：connect.php
connect_error) {
// die("连接失败: " . $conn->connect_error);
// }
// echo "连接成功";
?>代码二：php写接口的代码，文件名：index.php
query($sql1)->num_rows;
// 每页的数量
$page_size = 2;
// 总页数 ,其中ceil() 函数向上舍入为最接近的整数 0.6 = 1
$page_total = ceil($total_num / $page_size);
// 每页从哪一条数据开始，这个主要是给$sql2使用的，如$page_start为0，数据从第一条开始
$page_start = $page * $page_size;
// 这是php种的关联数组，关联数组是使用您分配给数组的指定的键的数组。
// 总页数, 每页的数量, 总页数
$arr = array(
"total_num" => $total_num,
"page_size" => $page_size,
"page_total_num" => $page_total
);
/*从goods表中，选择id，title，pic的值进行升序(从小到大)的排序，
从$page_start显示$page_size数据排序，默认数据库数据从0开始，所以$page_start一开始为0*/
$sql2 = "SELECT id,title,pic FROM goods ORDER BY ID ASC LIMIT $page_start,$page_size";
$result = $conn->query($sql2);
while ($row = $result->fetch_assoc()) {
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic']
);
}
// {"total_num":7,"page_size":6,"page_total_num":2,"list":[{"id":"7","title":"\u5e7f\u4e1c","pic":"\u5e7f\u5dde"}]}
echo json_encode($arr)
?>
说明逻辑：ajax.php接收每次前端页面的ajax请求，php主要是将总页面数，页面大小（就是每个页放多少条），总条数，还有list（list数组里面包括id，title，pic），以数组的格式返回给前端。数据的格式见代码中最后的注释部分。
三、HTML页面部分
ajax无刷新分页
说明：jq可以从官网下载，也可以从CDN引入，自己选择吧。
四、CSS样式部分
*{
padding:0;
margin:0;
}
li{
list-style: none;
}
a{
color:#000;
text-decoration: none;
}
.list{
width: 500px;
margin: 30px auto;
position: relative;
}
img{
width:50px;
height:50px;
}
#page{
margin: 12px 0 20px;
text-align: center;
}
#page span{
cursor: pointer;
}
#page .border{
width:20px;
height:20px;
display: inline-block;
border:1px solid #00000088;
color: #00000088;
font-size: 12px;
line-height: 17px;
text-align: center;
margin: 5px;
}
#page .border a{
display: block;
padding: 2px;
}
#page .disabled{
color:#000;
padding: 2px 1px 0 0;
background: #cccccc25;
border:1px solid #ccc;
line-height: 17px;
font-size: 12px;
}
五、javascript部分
// 一开始的当前页，自定义
let page_cur = 1;
// 总记录数，每页条数， 总页数
let total_num, page_size, page_total_num;
// 分页条显示的拼接变量
let page_str;
// ajax 过函数getData() 获取当前页数据。我们利用$.ajax GET方式把参数page以json格式传到ajax.php。
// 获取当前页的数据
function getData(page) {
$.ajax({
// 类型
type: 'GET',
// 传输地址(后台地址)
url: 'index.php',
// 传入php数据 当前页
data: {
'page': page - 1
},
dataType: 'json',
success: function(data){
// 清空列表
$("#ul_lists").empty();
// 记录条总数
total_num = data.total_num;
// 每页数量 后台定义每页6页
page_size = data.page_size;
// 记录当前页,用parseInt，不然传进来的是字符串
page_cur = parseInt(page);
// 总页数
page_total_num = data.page_total_num;
let li = "";
// 数据库的所有数据，后台发回json数据
let list = data.list;
// js原生中的foreach循环,遍历json数组
$.each(list, function(index, array){
li += `
,${array['title']}
`
})
$('#ul_lists').append(li);
},
// 当请求完成时调用的函数。
complete: function(){
// js生成分页，可以用程序替代
getPageBar();
},
error: function(){
alert("数据异常")
}
})
}
// 生成分页
function getPageBar(){
// 当前页大于总页面，就让它等于最后一页
if (page_cur > page_total_num){
page_cur = page_total_num
}
// 入股当前页小于1，则让它等于第一页
if (page_cur < 1) {
page_cur = 1;
}
// 显示条数，当前页和总页数
page_str = `
共${total_num}条
${page_cur}/${page_total_num}
`
// 判断是否可以点击上一页
if (page_cur === 1) {
// 如果在第一页
page_str += `
首页
上一页
`
} else {
// 如果在其他页
page_str += `
首页
上一页
`
}
// 中间页码排列导航
// 如果小于10个就不用显示...了
if (page_total_num <= 10) {
for (let i = 1; i<= page_total_num; i++) {
if (i === page_cur) {
page_str += `
${i}
`
} else {
page_str += `
${i}
`
}
}
// 如果大于10个就开始显示...了
} else {
// 前显示5个
if (page_cur <= 5) {
console.log(page_cur)
for (let i = 1; i <= 5; i++) {
// 判断是否命中当前值
if (i === page_cur) {
page_str += `
${i}
`
// 当前值的其余部分
} else {
page_str += `
${i}
`
}
}
// 多显示1个，给中间部分提高接口
page_str += `
6
`
page_str += "..."
page_str += `
${page_total_num}
`
// 后面4个
} else if (page_cur > page_total_num - 4){
page_str += `
1
`
page_str += "..."
// 多显示一个给中间提供接口
page_str += `
${page_total_num - 4}
`
for (let i = page_total_num - 3; i <= page_total_num; i++) {
if (i === page_cur) {
page_str += `
${i}
`
} else {
page_str += `
${i}
`
}
}
// 中间部分显示区域
} else {
page_str += `
1
`
page_str += "..."
// console.log(page_cur)
for (let i = page_cur - 2; i <= page_cur + 2; i++) {
// console.log(i, page_cur)
// 比如当前值为6，i = 4，5，6，7，8，所以只有1次命中6
if (page_cur === i) {
page_str += `
${i}
`
} else {
page_str += `
${i}
`
}
}
page_str += "..."
page_str += `
${page_total_num}
`
}
}
// 判断是否可以点击下一页
if (page_cur >= page_total_num) {
page_str += `
下一页
尾页
`
} else {
page_str += `
下一页
尾页
`
}
// 将所有的内容放入容器中
$("#page").html(page_str);
}
//运行测试
window.onload = function(){
// 一开始先展示数据
getData(1);
//live 向未来的元素添加事件处理器,不可用bind
$("#page a").live('click', function(){
// 获取当前页
var page = $(this).attr("data-page");
getData(page);
})
}说明：
①这部分是还可以继续完善，包括一些值，性能优化等等
②最后，当页面第一次加载时，我们加载第一页数据即getData(1)，当点击分页条中的分页链接时，通过getData(page)加载对应页码的数据。页面page可在分页的属性data-page中获取。
③getPageBar()这个函数是本节的重点也是难点部分，里面很多东西本人可能写的并不是很好，所以还望大家批评指教。
最后效果图：
效果图1：
效果图2：
效果图3:
