分页器的使用

总结一下最近两天写代码用到的知识点

1. localStorage的运用
   主要为了实现跨页面通讯,在一个页面存储进去,在另一个页面获取渲染

$('.nav_list > ul').on('click', 'li', function () {
  let pid = $(this).data('id')
let data = {}
//根据id在数组中找到对应的数据
  for (let i = 0; i < navListArr.length; i++) {
    if (navListArr[i].goods_id == pid) {
      data = navListArr[i]
      break;
    }
  }
localStorage.setItem('goods_info', JSON.stringify(data))
//跳转到某个页面
  location.href = `./detail.html`
})

2. jQuery.Page 分页器插件使用
   下载jquery.page插件,引入文件

 //引入的文件
<link rel="stylesheet" href="./jqueryPage/src/jquery.page.css"> 
	
<div id="page"></div>
 //引入的文件
<script src="./jquery/dist/jquery.min.js"></script> 
<script src="./jqueryPage/src/jquery.page.js"></script>

$("#page").Page({
     totalPages: Math.ceil(res.length / 9), //total Pages
     liNums: 7, //the li numbers(advice use odd)
     activeClass: 'activP', //active class style
     firstPage: '首页', //first button name
     lastPage: '末页', //last button name
     prv: '<<', //prev button name
     next: '>>', //next button name
     hasFirstPage: true, //whether has first button
     hasLastPage: true, //whether has last button
     hasPrv: true, //whether has prev button
     hasNext: true, //whether has next button
     callBack: function (page) {
     //callBack function，page:active page
      console.log(page)
      let list = res.slice((page - 1) * 9, page * 9)
      bindhtml(list)         //渲染数据             
    }
 });