js分页（优化）

<style type="text/css">
      #table_select {
        width: 96%;
        /* height: ; */
        /* background-color: yellow; */
        padding: 0px 2% 0px 2%;
      }
      #select_inner {
        width: 100%;
        height: 45px;
        /* background-color: red; */
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        color: #909399;
        font-size: 14px;
      }
      #select_border input {
        background-color: transparent;
        /* border-color: rgb(210, 213, 216); */
        border: 1px solid red;
        width: 15px;
        height: 15px;
        outline: none;
      }
      #select_border {
        width: 3%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #select_id {
        width: 4.1%;
        height: 100%;
        /* background-color: yellow; */
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #select_id_inner {
        width: 4%;
        height: 100%;
        /* background-color: yellow; */
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #select_name_inner {
        width: 14.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #identity_card {
        width: 11.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #customer {
        width: 14.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #contract {
        width: 8%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #employment_form {
        width: 11.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #item_located {
        width: 11.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #before_the_post {
        width: 11.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      #level_inner {
        width: 8.1%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
      }
      .select_table {
        width: 100%;
        height: 45px;
        /* background-color: red; */
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        color: #5b5d61;
        font-size: 14.3px;
        transition: 0.2s;
      }
      .select_table:hover {
        background-color: #F5F7FA;
        transition: 0.2s;
      }
      #form {
        width: 100%;
        height: 570px;
        /* background-color: #409EFF; */
        overflow-y: scroll;
        overflow-x: scroll;
        border-bottom: 1px solid #E4E7ED;
      }
      #form::-webkit-scrollbar {
        display: none
      }
      .form_table {
        width: 100%;
        height: 48px;
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        color: #5b5d61;
        font-size: 14.3px;
        transition: 0.2s;
      }
      .form_table:hover {
        background-color: #F5F7FA;
        transition: 0.2s;
      }
      .form_tabta {
        width: 100%;
        height: 48px;
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        color: #5b5d61;
        font-size: 14.3px;
        transition: 0.2s;
        background-color: #E47470;
      }
      .form_tabta:hover {
        background-color: #F5F7FA;
        transition: 0.2s;
      }
      #form_chechbox {
        width: 3%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_chechbox input {
        background-color: transparent;
        /* border-color: rgb(210, 213, 216); */
        border: 1px solid red;
        width: 15px;
        height: 15px;
        outline: none;
      }
      #form_id {
        width: 5%;
        height: 100%;
        /* background-color: yellow; */
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_name {
        width: 7%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_identity {
        width: 12%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_Telephone {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_contract {
        width: 8%;
        height: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 23px;
      }
      #form_employment {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_item {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #fork_beforepost {
        width: 8%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_stalls {
        width: 8%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_status {
        width: 9%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #form_operate {
        width: 10%;
        height: 100%;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        /* margin-left:%; */
      }
      #form_operate button {
        width: 78px;
        height: 32px;
        background-color: #409EFF;
        /* background-color: red; */
        border-radius: 5px;
        color: white;
        border: none;
        outline: none;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 25%;
        margin-top: 6%;
      }
      #form_operate img {
        width: 13px;
        height: 13px;
        margin-left: 5px;
      }
      #select_font {
        transition: 0.1s;
        width: 78px;
        height: 95px;
        background-color: #FFFFFF;
        /* position: absolute; */
        position: relative;
        /* margin-top: 140px; */
        display: none;
        /* position: relative; */
        /* margin-top: 7px; */
        border-radius: 10px;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        z-index: 999;
        margin-left: 25%;
        padding-top: 10px;
      }
      #form_operate button:hover {
        background-color: rgba(64, 158, 255, 0.8);
      }
      #form_operate:hover #select_font {
        transition: 0.1s;
        display: block;
      }
      .select {
        width: 100%;
        height: 30px;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
        cursor: pointer;
      }
      .select:hover {
        background-color: #F2F5FF;
      }
      .select_font:hover {
        background-color: #F2F5FF;
        color: rgb(126, 156, 255);
      }
      .select_font {
        width: 100%;
        height: 30px;
        background-color: #FFFFFF;
        color: #19191b;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .detail {
        width: 100%;
        height: 30px;
        cursor: pointer;
        /* background-color: red; */
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5b5d6;
      }
      .detail:hover {
        background-color: #ECF5FF;
        color: #7e9cff;
      }
      #page_footer {
        width: 100%;
        height: 32px;
        display: flex;
        /* background-color: red; */
        align-items: center;
        justify-content: center;
      }
      #page_footer p {
        font-size: 14px;
        color: #5b5d61;
        margin-left: 10px;
      }
      #page_footer input {
        width: 50px;
        height: 100%;
        margin-left: 10px;
        color: #909399;
        background-color: transparent;
        outline: none;
        border: none;
        border-radius: 4px;
        border: 1px solid #E4E7ED;
        text-align: center;
      }
      .button_but {
        width: 32px;
        height: 32px;
        border: none;
        outline: none;
        background-color: #F0F2F5;
        color: #5b5d61;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
      }
      #but {
        display: flex;
        height: 32px;
      }
      #but div {
        background-color: #F0F2F5;
        color: #5b5d61;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin-left: 10px;
      }
      #but div:hover {
        color: #409EFF;
      }
      #page_footer select {
        width: 120px;
        height: 20px;
        /* border: none; */
        color: #909399;
        background-color: transparent;
        outline: none;
        border-radius: 4px;
        border-color: #E4E7ED;
      }
      .button_but:hover {
        color: #409EFF;
      }
    </style>

<div id="table_select">
      <div id="select_inner">
        <div id="select_id">
          <input type="checkbox" name="" id="">
        </div>
        <div id="select_id_inner">
          <b>id</b>
        </div>
        <div id="select_name_inner">
          <b>项目名称</b>
        </div>
        <div id="identity_card">
          <b>负责人</b>
        </div>
        <div id="customer">
          <b>劳资员</b>
        </div>
        <div id="contract">
          <b>项目人数</b>
        </div>
        <div id="employment_form">
          <b>立项时间</b>
        </div>
        <div id="item_located">
          <b>负责人电话</b>
        </div>
        <div id="before_the_post">
          <b>项目部地址</b>
        </div>
        <div id="level_inner">
          <b>操作</b>
        </div>
      </div>
      <div id="form">
      </div>
      <div style="height: 130px;width: 100%;display: flex;align-items: center;">
        <div id="page_footer">
          <select id="number_select">
            <option value="10">10条/页</option>
            <option value="5">5条/页</option>
            <option value="30">30条/页</option>
          </select>
          <p>共<span id="common"></span>条</p>
          <div class="button_but" onclick="bou()">
            《
          </div>
          <div id="but">
          </div>
          <div class="button_but" onclick="bottom()">》</div>
          <p>前往</p> <input type="text" class="input-text" value=""
            onkeyup="value=value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,'')" id="price" name="price"
            id="title_number">
          <p>页</p>
        </div>
      </div>
    </div>

<script type="text/javascript">
      let page = {
        pageSize: 10, //每页多少条数据
        currentPage: 1, //第几页
        total: 0, //总共有多少条数据
      };
      let title_number = document.getElementById('title_number');
      let number_select = document.getElementById('number_select');
      let pages_number;
      let viewData = []; //页面要渲染的数据
      number_select.onchange = function() {
        // console.log(number_select.value);
        page.pageSize = number_select.value;
        title()
        console.log(page.pageSize);
      }
      let price = document.getElementById('price');
      // 总页数
      let jump;
      price.onchange = function() {
        // input数字
        let price_val = document.getElementById('price').value;
        // title()
        if (price_val > 1 && price_val <= jump) {
          title()
          page.currentPage = price_val;
        }
        if (price_val < 1) {
          price_val = 1;
        }
        if (price_val > jump) {
          alert('暂无此页')
        }
      }
      function title() {
        // 渲染数据
        $.ajax({
          url: "http://labour.kuxia.top/api/Staff/staff_info",
          type: "POST",
          data: {
            sign: '3',
            id: '1',
            pid: '1',
            admin_id: '1',
            admin_name: '超级管理员'
          },
          success: function(data) {
            console.log(data);
            jump = Math.ceil(data.info.length / page.pageSize);
            $("#common").html(data.info.length)
            page.total = data.info.length; //页面要显示的数据总条数
            // viewData = data.info.slice((page.currentPage - 1) * page.pageSize, page.pageSize + ((page
            //    .currentPage - 1) * page
            //  .pageSize)); //这里就是截取出来第一页的十条数据
            viewData = data.info.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page
              .pageSize);
            console.log(viewData);
            let data_inner = '';
            for (let i = 0; i < viewData.length; i++) {
              if (viewData[i].grade == null) {
                data_inner += `<div class="form_tabta">
                                          <div id="form_chechbox">
                                            <input type="checkbox" name="" id="">
                                          </div>
                                          <div id="form_id">
                                            <span>${viewData[i].id}</span>
                                          </div>
                                          <div id="form_name">
                                            <span>${viewData[i].name}</span>
                                          </div>
                                          <div id="form_identity">
                                            <span>${viewData[i].id_number}</span>
                                          </div>
                                          <div id="form_Telephone">
                                            <span>${viewData[i].tel}</span>
                                          </div>
                                          <div id="form_contract">
                                            <p>${viewData[i].entry_time}</p>
                                            <p>${viewData[i].graduation_date}</p>
                                          </div>
                                          <div id="form_employment">
                                            <span>${viewData[i].title}</span>
                                          </div>`;
                if (viewData[i].pname != null) {
                  data_inner += `<div id="form_item">
                                              <span>${viewData[i].pname}</span>
                                            </div>`
                } else if (viewData[i].pname == null) {
                  data_inner += `<div id="form_item">
                                              <span></span>
                                            </div>`
                }
                data_inner += `<div id="fork_beforepost">
                                            <span>${viewData[i].jobs}</span>
                                          </div>`;
                if (viewData[i].grade == null) {
                  data_inner += `<div id="form_stalls">
                                              <span></span>
                                            </div>`
                } else if (viewData[i].grade != null) {
                  data_inner += `<div id="form_stalls">
                                            <span>${viewData[i].grade}</span>
                                          </div>`;
                }
                if (viewData[i].status == '在职') {
                  data_inner +=
                    `<div id="form_status"><span style="color: rgb(126, 156, 255);">${viewData[i].status}</span></div>`
                } else if (viewData[i].status == '离职') {
                  data_inner +=
                    `<div id="form_status"><span style="color: rgb(220, 20, 60);">${viewData[i].status}</span></div>`
                }
                data_inner += `<div id="form_operate">
                            <button>更多<img src="img/errowimg.png" alt=""></button>
                                            <div id="select_font">
                                          <div class="select_font">详情</div>
                                              <div class="select_font">编辑</div>
                                              <div class="select" onclick="dale(${viewData[i].id})">删除</div>
                                              <div class="select">拉黑</div>
                                            </div>
                                            </div>
                                        </div>`;
              } else if (viewData[i].grade != null) {
                data_inner += `<div class="form_table">
                              <div id="form_chechbox">
                                <input type="checkbox" name="" id="">
                              </div>
                              <div id="form_id">
                                <span>${viewData[i].id}</span>
                              </div>
                              <div id="form_name">
                                <span>${viewData[i].name}</span>
                              </div>
                              <div id="form_identity">
                                <span>${viewData[i].id_number}</span>
                              </div>
                              <div id="form_Telephone">
                                <span>${viewData[i].tel}</span>
                              </div>
                              <div id="form_contract">
                                <p>${viewData[i].entry_time}</p>
                                <p>${viewData[i].graduation_date}</p>
                              </div>
                              <div id="form_employment">
                                <span>${viewData[i].title}</span>
                              </div>`
                if (viewData[i].pname != null) {
                  data_inner += `<div id="form_item">
                                                            <span>${viewData[i].pname}</span>
                                                          </div>`
                } else if (viewData[i].pname == null) {
                  data_inner += `<div id="form_item">
                                                            <span></span>
                                                          </div>`
                }
                data_inner += `<div id="fork_beforepost">
                                <span>${viewData[i].jobs}</span>
                              </div>`;
                if (viewData[i].grade == null) {
                  data_inner += `<div id="form_stalls">
                                  <span></span>
                                </div>`
                } else if (viewData[i].grade != null) {
                  data_inner += `<div id="form_stalls">
                                <span>${viewData[i].grade}</span>
                              </div>`;
                }
                if (viewData[i].status == '在职') {
                  data_inner +=
                    `<div id="form_status"><span style="color: rgb(126, 156, 255);">${viewData[i].status}</span></div>`
                } else if (viewData[i].status == '离职') {
                  data_inner +=
                    `<div id="form_status"><span style="color: rgb(220, 20, 60);">${viewData[i].status}</span></div>`
                }
                data_inner += `<div id="form_operate">
                <button>更多<img src="img/errowimg.png" alt=""></button>
                                <div id="select_font">
                                  <div class="select_font">详情</div>
                                  <div class="select_font">编辑</div>
                                  <div class="select" onclick="dale(${viewData[i].id})">删除</div>
                                  <div class="select">拉黑</div>
                                </div>
                                </div>
                            </div>`;
              }
            }
            $("#form").html(data_inner)
            let Pagecount = Math.ceil(data.info.length / page.pageSize);
            // console.log(Pagecount);
            let three = "";
            for (let i = 0; i < Pagecount; i++) {
              let is = i + 1;
              if (page.currentPage - 1 == i) {
                three += '<div onclick="previous_span(' + i +
                  ')" class="span_iner" style="background-color: #409EFF;width:2vw;color:white">' +
                  is + '</div> ';
              } else {
                three += '<div onclick="previous_span(' + i +
                  ')" style="width:2vw;background-color:#F0F2F5;" class="span_iner">' + is +
                  '</div> ';
              }
            }
            $("#but").html(three)
          },
        })
      }
      title()
      // 上一页
      function bou() {
        if (page.currentPage > 1) {
          page.currentPage--;
          console.log(page.currentPage);
          title()
        } else if (page.currentPage == 1) {
          alert('第一页')
        }
      }
      // 下一页
      function bottom() {
        console.log(page.total);
        console.log(Math.ceil(page.total / page.pageSize));
        if (page.currentPage != Math.ceil(page.total / page.pageSize)) { //判断当前页面不等于总条数除于每页多少条
          page.currentPage++;
          title()
        } else if (page.currentPage == Math.ceil(page.total / page.pageSize)) { //判断当前页面等于总条数除于每页多少条
          alert('最后一页')
        }
      }
      // 点击哪个数字跳到相应的页数
      function previous_span(i) {
        // let price_val = document.getElementById('price').innerText;
        // console.log(price_val);
        // price_val = 2;
        // console.log(price_val);
        let span_iner = document.getElementsByClassName('span_iner');
        page.currentPage = i + 1;
        console.log(page.currentPage);
        title()
      }
    </script>