分页器
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>
const p = new Pagination('.pagination', {
total : 200,
})
</script>
class Pagination{
constructor(ele, options = {
}){
this.ele = document.querySelector(ele)
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 || (() => {
}),
}
this.btnCss = {
float: 'left',
border:'1px solid #e6e6e6',
padding:'6px 9px',
fontSize: '12px',
margin:'5px',
cursor: 'pointer'
}
this.init()
}
init(){
this.default.totalpage = Math.ceil(this.default.total / this.default.pagesize )
this.renderHtml()
this.setBoxStyle()
this.bindEvent()
}
renderHtml(){
const {
first, prev, next, last } = this.default
const frg = document.createDocumentFragment()
frg.appendChild(setCss(creEle('div', 'first', first), this.btnCss))
frg.appendChild(setCss(creEle('div', 'prev', prev), this.btnCss))
const list = setCss(creEle('div', 'list', ''), {
margin: 0, padding: 0, float: