JS-part15-分页器

分页器

1. 根据传递的参数设置一系列默认值
 => first 显示的文字
 => 根据多少条数据和一页显示多少条计算多少页
 => 不管用户是否传递, 你得有一套默认值
 => 用户传递的数据和默认值配套
2. 渲染结构
  => this.ele 里面要添加 div * 6
    -> 我需要创建至少 6 个 div
    -> 每个 div 的类名不一样, 文本内容不一样, 样式也不太一样
  => 准备两个方法
  	-> 一个是专门创建元素的方法
 	-> 一个是专门添加样式的方法
  => 使用我们准备的两个方法创建标签
    -> 创建 list 的时候, 需要向 list 里面添加一些内容
  => 向 list 里面添加一些内容
  	-> 需要根据 default.current 
 	-> 需要根据 default.totalPage
 	-> 最后再解决这个问题, 先按照默认的 9 页来渲染

3. 设置大盒子的样式
  => 给 this.ele 设置一些样式

4. 切换各种页
  => 都是点击事件
  => DOM 结构都是渲染的
  =>  事件委托, this.ele
  => 判断你点击的是哪一个按钮
    -> 改掉 current
    -> 渲染一遍 DOM 结构
  => 可以加一个回车事件
    -> 和 go 按钮的事件一模一样

5. 准备一个回调函数
  => 每次改变当前页的时候, 我需要做一些事情
  => 把你要做的事情放在一个函数里面传递进来
  => 我每次改变的时候, 帮你触发一下
  => 因为每一次改变 current 都会执行一下 this.renderHtml()
    -> 就在 renderHtml()里面去调用回调函数

6. 把结构重新调整一下
  6-1. init 里面计算一下 totalPage

<div class="box">
    <div class="pagination"></div>
</div>


<script src="./pagination.js"></script>

<script>
    /*
      pagination
        1. 先把静态页面写好
        2. 开始书写构造函数
    */

    // 可以选择自己计算
    // 也可以选择传递进去参数由 构造函数 计算
    const p = new Pagination('.pagination', {
   
        // current: 7,
        total : 200,
        // // first: 'first',
        // // next: '>',
        // // last: '>>'
        // change(num){
   

        // }
    })
    // console.log(p)

</script>

class Pagination{
   
    constructor(ele, options = {
    }){
   
        this.ele = document.querySelector(ele)

        // 1. 设置一套默认值
        this.default = {
   
            current: options.current || 1, // 当前是第几页
            total: options.total || 90,  //一共多少条数据
            totalpage: 9, // 多少页, 我去计算
            pagesize: options.pagesize || 10,  // 一页显示多少条
            first: options.first || '首页',  // 默认首页文字
            prev: options.prev || '上一页', // 默认上一页文本
            next: options.next || '下一页',  // 默认下一页
            last: options.last || '尾页',  // 默认尾页
            go: options.go || 'go',  // 默认跳转按钮文本
            change: options.change || (() => {
   }),   // 每次改变的时候触发的函数
            // styles: {}, // 用户设置的独立样式
        }

        // 单独提取一套按钮样式
        this.btnCss = {
   
            float: 'left',
            border:'1px solid #e6e6e6',
            padding:'6px 9px',
            fontSize: '12px',
            margin:'5px',
            cursor: 'pointer'
        }

        this.init()
    }

    init(){
   
        // 6-1. 计算总页数
        this.default.totalpage = Math.ceil(this.default.total / this.default.pagesize )

        this.renderHtml()
        this.setBoxStyle()
        this.bindEvent()
    }

    // 2. 渲染 DOM 结构
    renderHtml(){
   
        //解构赋值
        const {
    first, prev, next, last } = this.default
        // 因为要渲染很多的结构进去
        // 准备一个'筐'
        const frg = document.createDocumentFragment()

        // 1. 创建一个首页标签
        frg.appendChild(setCss(creEle('div', 'first', first), this.btnCss))
        frg.appendChild(setCss(creEle('div', 'prev', prev), this.btnCss))

        // list 单独接收一个变量
        const list = setCss(creEle('div', 'list', ''), {
    margin: 0, padding: 0, float: <