前端分页导航制作

最新推荐文章于 2022-11-02 00:05:53 发布

低调的小犬_Hansen

最新推荐文章于 2022-11-02 00:05:53 发布

阅读量511

点赞数 1

分类专栏：小栗子 javascript php 文章标签： ajax php javascript 分页导航

本文链接：https://blog.csdn.net/qq_38588845/article/details/103447875

版权

javascript 同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

php

6 篇文章 0 订阅

订阅专栏

小栗子

1 篇文章 1 订阅

订阅专栏

前言：

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

<?php
// connect.php
 $servername = "localhost";
// 数据库服务器
 $username = "root";
//数据库名称，一般为root
 $password = "325600";
 $dbname = "test";
//数据库密码
 // 创建连接
 $conn = new mysqli($servername, $username, $password, $dbname);
 
 // 检测连接
//  if ($conn->connect_error) {
//      die("连接失败: " . $conn->connect_error);
//  } 
//  echo "连接成功";
?>

代码二：php写接口的代码，文件名：index.php

<?php
  // index.php
  // include_once 函数会将指定的文件载入并执行里面的程序；
  include_once('connect.php');

  // 当前页，intval() 函数用于获取变量的整数值，如4.2=4
  $page = intval($_GET['page']);
  // $page = 0;
  $sql1 = "SELECT id FROM goods";

  // 记录数据库的总条数
  $total_num = $conn->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页面部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ajax无刷新分页</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="list">
    <!-- #ul_lists以列表的形式展现数据，信息包括商品图片和标题 -->
    <ul id="ul_lists" class="clearfix"></ul>
  </div>
  <div id="page"></div>

  <script src="./jquery-1.8.3.min.js"></script>
  <script src="./index.js"></script>
  <script>

  </script>
</body>
</html>

说明：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 += `
            <li>
              <a href = "#">
                <img src=${array['pic']}>,${array['title']}
              </a>
            </li>
        `
      })
      $('#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 = `
    <span>共${total_num}条</span>
    <span>${page_cur}/${page_total_num}</span>
  `
  // 判断是否可以点击上一页
  if (page_cur === 1) {
    // 如果在第一页
    page_str += `
      <span>首页</span>
      <span>上一页</span>
    `
  } else {
    // 如果在其他页
    page_str += `
      <span><a href="javascript:void(0)" data-page="1">首页</a></span>
      <span><a href="javascript:void(0)" data-page=${page_cur - 1}>上一页</a></span>
    `
  }

  // 中间页码排列导航
  // 如果小于10个就不用显示...了
  if (page_total_num <= 10) {
    for (let i = 1; i<= page_total_num; i++) {
      if (i === page_cur) {
        page_str +=  `
          <span class="border disabled">${i}</span>
        `
      } else {
        page_str +=  `
          <span class="border"><a href="javascript:void(0)" data-page=${i}>${i}</a></span>
        `
      }
    }
  // 如果大于10个就开始显示...了
  } else {
    // 前显示5个
    if (page_cur <= 5) {
      console.log(page_cur)
      for (let i = 1; i <= 5; i++) {
        // 判断是否命中当前值
        if (i === page_cur) {
          page_str += `
            <span class="border disabled">${i}</span>
          `
        // 当前值的其余部分
        } else {
          page_str += `
            <span class="border"><a href="javascript:void(0)" data-page=${i}>${i}</a></span>
          `
        }
      }
      // 多显示1个，给中间部分提高接口
      page_str +=  `
        <span class="border"><a href="javascript:void(0)" data-page="6">6</a></span>
      `
      page_str += "<span>...</span>"
      page_str += `
        <span class="border"><a href="javascript:void(0)" data-page=${page_total_num}>${page_total_num}</a></span>
      `
    // 后面4个
    } else if (page_cur > page_total_num - 4){

        page_str += `
          <span class="border"><a href="javascript:void(0)" data-page="1">1</a></span>
        `
        page_str += "<span>...</span>"
        // 多显示一个给中间提供接口
        page_str += `
          <span class="border"><a href="javascript:void(0)" data-page=${page_total_num - 4}>${page_total_num - 4}</a></span>
        `
        for (let i = page_total_num - 3; i <= page_total_num; i++) {
          if (i === page_cur) {
            page_str += `
              <span class="border disabled">${i}</span>
            `
          } else {
            page_str += `
              <span class="border"><a href="javascript:void(0)" data-page=${i}>${i}</a></span>
            `
          }
        }
    // 中间部分显示区域
    } else {
      page_str += `
        <span class="border"><a href="javascript:void(0)" data-page="1">1</a></span>
      `
      page_str += "<span>...</span>"
      // 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 += `
            <span class="border disabled">${i}</span>
          `
        } else {
          page_str += `
            <span class="border"><a href="javascript:void(0)" data-page=${i}>${i}</a></span>
          `
        }
      }

      page_str += "<span>...</span>"
      page_str += `
        <span class="border"><a href="javascript:void(0)" data-page=${page_total_num}>${page_total_num}</a></span>
      `
    }
      

  }

  // 判断是否可以点击下一页
  if (page_cur >= page_total_num) {
    page_str += `
      <span>下一页</span>
      <span>尾页</span>
    `
  } else {
    page_str += `
      <span><a href="javascript:void(0)" data-page=${parseInt(page_cur) + 1}>下一页</a></span>
      <span><a href="javascript:void(0)" data-page=${page_total_num}>尾页</a></span>
    `
  }
  // 将所有的内容放入容器中
  $("#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:

低调的小犬_Hansen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端分页导航制作

前言：1.本案例是讲分页导航的，包括上一页，下一页，还有页码导航的2.用ajax+php+js+mysql去做的环境介绍：MySql、XAMPP、VSCode语言介绍：ES5、ES6、html、css、javascript、jQuery、ajax、php一、输入mysql语句部分代码如下：goods表CREATE TABLE IF NOT EXI...
复制链接

扫一扫