JavaScript分页功能制作-阿里云开发者社区

JavaScript分页功能制作

2023-07-22 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript分页功能制作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    <style type="text/css">
      #button{
        display: flex;
      }
    </style>
    <div id="list">
    </div>
    <div id="button">
      <button onclick="up()">上一页</button>
      <div id="but">
      </div>
      <button onclick="bottom()">下一页</button>
    </div>
    <script type="text/javascript">
      let data = [{ //模拟数据（假设这就是从后台请求过来的数据）
          name: "沈阳市",
          value: ["123.429092", "41.796768"],
        },
        {
          name: "长春市",
          value: ["125.324501", "43.886841"],
        },
        {
          name: "哈尔滨市",
          value: ["126.642464", "45.756966"],
        },
        {
          name: "北京市",
          value: ["116.405289", "39.904987"],
        },
        {
          name: "天津市",
          value: ["117.190186", "39.125595"],
        },
        {
          name: "呼和浩特市",
          value: ["111.751990", "40.841490"],
        },
        {
          name: "银川市",
          value: ["106.232480", "38.486440"],
        },
        {
          name: "太原市",
          value: ["112.549248", "37.857014"],
        },
        {
          name: "石家庄市",
          value: ["114.502464", "38.045475"],
        },
        {
          name: "济南市",
          value: ["117.000923", "36.675808"],
        },
        {
          name: "郑州市",
          value: ["113.665413", "34.757977"],
        },
        {
          name: "西安市",
          value: ["108.948021", "34.263161"],
        },
        {
          name: "武汉市",
          value: ["114.298569", "30.584354"],
        },
        {
          name: "南京市",
          value: ["118.76741", "32.041546"],
        },
      ]
      let page = {
        pageSize: 5, //每页显示多少数据
        currentPage: 1, //初始页面
        total: 0, //总共有多少条数据
      };
      let viewData = []; //页面要渲染的数据
      function aa(){
        page.total = data.length; //页面要显示的数据总条数
        viewData = data.slice((page.currentPage - 1) * page.pageSize, page.pageSize + ((page.currentPage - 1) * page
          .pageSize)); //这里就是截取出来第一页的十条数据
        // console.log(page.currentPage);
        let arr = "";
        for (let i = 0; i < viewData.length; i++) {
          arr += '<div id="box">'+ viewData[i].name +'</div>'
        }
        let Pagecount = Math.ceil(data.length / page.pageSize);
        let three = "";
        for (let i = 0; i < Pagecount; i++) {
          let is = i + 1;
          three += '<span onclick="previous_span(' + i +
            ')" style="width:2vw" class="span_iner">' + is + '</span> ';
        }
        $("#but").html(three)
        $("#list").html(arr)
      }
      aa()
      // 上一页
      function up(){
        if(page.currentPage > 1){
          page.currentPage--;
          console.log(page.currentPage);
          aa()
        }else if (page.currentPage  == 1) {
          alert('第一页')
        }
      }
      // 下一页
      function bottom(){
        if (page.currentPage != Math.ceil(page.total / page.pageSize)) {  //判断当前页面不等于总条数除于每页多少条
          page.currentPage++;
          aa()
        }else if(page.currentPage == Math.ceil(page.total / page.pageSize)){    //判断当前页面等于总条数除于每页多少条
          alert('最后一页')
        }
      }
      // 点击哪个数字跳到相应的页数
      function previous_span(i) {
          let span_iner = document.getElementsByClassName('span_iner');
          page.currentPage = i + 1;
          aa()
        }
    </script>
  </body>
</html>

JavaScript分页功能制作

热门文章

最新文章

相关课程

相关电子书

相关实验场景