h5-bootstrap实现分页(cv改下接口就能成)

请叫我欧皇i

已于 2022-12-14 11:02:51 修改

阅读量622

点赞数

分类专栏： vue2 Element 文章标签： bootstrap 前端 html

于 2022-12-13 18:50:16 首次发布

本文链接：https://blog.csdn.net/qq_44278289/article/details/128290419

版权

vue2 Element 专栏收录该内容

76 篇文章 30 订阅

订阅专栏

因项目需求,在h5页面要通过axios调用接口渲染页面,并且实现分页,分页样式用到了bootstrap,在此记录一下,一共有是俩种方法.

1-在html页面使用页面样式

    <div class="page flex_center">
      <nav aria-label="...">
        <ul class="pagination" id="pages">
        </ul>
      </nav>
    </div>

2-创建一个js文件,并且导入在需要使用的html页面中

var total = null // 总数量
var pagetotal = 0 // 总页数
var lis = []
var code = 1
var pageSize = 5 // 条
var pageNum = 1 // 页
sessionStorage.setItem('pageNum', pageNum)
// 容器
var industryinfo = document.querySelector('#success');
// 分页
var pages = document.querySelector('#pages');
function getlist (pageNum, pageSize) {
  axios({
    url: '接口url',
    method: 'post',
    data: {
      pageNum: pageNum,
      pageSize: pageSize,
      obj: {
        type: '1' 
      }
    }
  }).then(function (response) {
    if (response.data.status == 0) {
      var str = ''
      var str1 = ''
      total = response.data.data.total // 总数量
      var list = response.data.data.list // 列表
      list.forEach(item => {
        str += `       <div class="row success-box" onclick="deltail(${JSON.stringify(item).replace(/"/g, '&quot;')})">
        <div class="col-xs-12 col-md-12 item-top">
          <img class="img-box img-responsive" src="${item.pic}" alt="暂无图片">
        </div>
        <div class="col-xs-12 col-md-12 item-bottom">
          <h3 class="item-title f23px_bold">${item.title}</h3>
          <div class="line" style="margin-left:10px"></div>
          <div class="item-time col_999">
            <span class="iconfont icon-riqi" style="color:#4cb174;margin-right:5px"></span>
            ${item.createTime}
          </div>
          <div class="item-look">
            <p></p>
            <div class="flex_center">
              <p style="margin-right: 10px; font-size: 15px" class="col_999">查看详情</p>
              <img class="jiantou_icon" src="./images/jiantou.png">
            </div>
          </div>
        </div>
      </div>`
      });
      industryinfo.innerHTML = str
      pagetotal = Math.ceil(response.data.data.total / response.data.data.pageSize) // 总 -页
      for (let index = 0; index < pagetotal; index++) {
        str1 += ` <li class="" id="${index + 1}" onclick="comClick(${index + 1})"><a href="#">${index + 1}</a></li>`
      }
      var all = `<li onclick="prevpage()">
      <a href="#" aria-label="Previous"><span aria-hidden="true" >上一页</span></a>
      </li>${str1}<li onclick="nextpage()"><a href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>`
      pages.innerHTML = all
      // --默认激活-----------------
      lis = document.querySelectorAll('.pagination>li')
      lis[code].classList.add("active");
    }
  }).catch(function (err) {
    console.log(err)
  });
};
// 调用
getlist(pageNum, pageSize)
// ------------------------------------------
// 上一页
function prevpage () {
  var pageNum = sessionStorage.getItem('pageNum')
  pageNum--
  if (pageNum < 1) {
    pageNum = 1
  }
  comClick(pageNum)
}
// 下一页
function nextpage () {
  var pageNum = sessionStorage.getItem('pageNum')
  pageNum++
  if (pageNum > pagetotal) {
    pageNum = pagetotal
  }
  comClick(pageNum)
}
function comClick (stu) {
  sessionStorage.setItem('pageNum', stu)
  code = stu
  for (let index = 0; index < lis.length; index++) {
    if (lis[index].id == stu) {
      lis[index].classList.add("active");
    } else {
      lis[index].classList.remove("active")
    }
  }
  getlist(stu, pageSize)
}

function deltail (item) {
  item = JSON.stringify(item)
  window.location.href = encodeURI("/detail.html?item=" + item)
}

另一种,也是可以重新数据请求分页的

console.log(serveUrl, '看能不能请求到');
var content = ''
var success = document.querySelector("#success")
console.log(success, '获取');
const obj = {
  type: 1
}
//总记录数
var totalNum = 0;
//总页数
var totalPage = 0;
//默认每页显示数
var avageNum = 5;
var currentPage = 1;
getUserList(currentPage, avageNum);
function getUserList (pageNum, pageSize) {
  console.log(pageNum, pageSize);
  currentPage = pageNum;
  // body
  axios({
    method: 'post',
    url: serveUrl + `/news/queryList`,
    data: {
      pageNum,
      pageSize,
      obj
    }
  }).then(res => {
    console.log(res)
    if (res.data.status == 0) {
      var list = res.data.data.list
      totalPage = res.data.data.pages
      console.log(res.data.data.pages, totalPage, '---------');
      content = ''
      list.forEach((item, index) => {
        content += `
                <div class="row success-box" onclick="deltail(${JSON.stringify(item).replace(/"/g, '&quot;')})">
          <div class="col-xs-12 col-md-12 item-top">
            <img class="img-box img-responsive" src="${item.pic}" alt="暂无图片">
          </div>
          <div class="col-xs-12 col-md-12 item-bottom">
            <h3 class="item-title f23px_bold">${item.title}</h3>
            <div class="line" style="margin-left:10px"></div>
            <div class="item-time col_999">
              <span class="iconfont icon-riqi" style="color:#4cb174;margin-right:5px"></span>
              ${item.createTime}
            </div>
            <div class="item-look">
              <p></p>
              <div class="flex_center">
                <p style="margin-right: 10px; font-size: 15px" class="col_999">查看详情</p>
                <img class="jiantou_icon" src="./images/jiantou.png">
              </div>
            </div>
          </div>
        </div>
                `
      });
      success.innerHTML = content
      // initPagination(totalNum,totalPage);
    }
  }).catch(err => {

  })
}


function deltail (item) {
  item = JSON.stringify(item)
  window.location.href = encodeURI("/detail.html?item=" + item)
}
setTimeout(() => {
  initPagination(totalNum, totalPage);
}, 1000);
//初始化分页栏
function initPagination (totalNum, totalPage) {
  console.log(totalNum, totalPage);
  $('#pagination').html(" ");
  $('#pagination').append(
    '<ul class="pagination">' +
    '</ul>'
  )
  // onclick="getUserList('+ (currentPage - 1) + ','+ avageNum + ')"
  $("#pagination ul").append(
    '<li><a href="javascript:void(0);" id="prev">上一页</a>'
  )
  for (var i = 1; i <= totalPage; i++) {
    $("#pagination ul").append(
      '<li id="page' + i + '"><a href="javascript:void(0);"  onclick="getUserList(' + i + ',' + avageNum + ')">' + i + '</a>'
    )
  }
  $("#pagination ul").append(
    '<li><a href="javascript:void(0);"  id="next"> <span aria-hidden="true">上一页</span></a>'
  )
  $("select option[value=" + avageNum + "]").attr('selected', true)
  $("#page1").addClass("active");
  checkA();
}

$(document).off('change', '#dataNum').on('change', '#dataNum', function () {
  avageNum = $(this).children('option:selected').val();
  currentPage = 1;
  getUserList(currentPage, avageNum);
  initPagination(totalPage, totalNum);
});

//设置分页栏点击时候的高亮
$("#pagination").on("click", "li", function () {
  var aText = $(this).find('a').html();
  checkA();
  if (aText == "上一页") {
    $(".pagination > li").removeClass("active");
    $("#page" + (currentPage - 1)).addClass("active");
    getUserList(currentPage - 1, avageNum);
    checkA();
  } else if (aText == "下一页") {
    $(".pagination > li").removeClass("active");
    $("#page" + (currentPage + 1)).addClass("active");
    getUserList(currentPage + 1, avageNum);
    checkA();
  } else {
    $(".pagination > li").removeClass("active");
    $(this).addClass("active");
  }
})

//因为其他地方都需要用到这两句，所以封装出来
//主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
function checkA () {
  currentPage == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
  currentPage == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
}