一．分页
效果图:
功能思路分析:
分页就是将所有的数据按指定条数分成若干份: 假如有24条数据，每页只显示5条，则需要分成Math.ceil(24 / 5) = 5页; 每次只显示1页数据，所以需要在总数据中利用slice截取出1页数据渲染
每一页的数据分布如下:
第一页: 显示1 - 5条数据 截取 data.slice(0,5)
第二页: 显示6 - 10条数据 截取 data.slice(5,10)
第三页: 显示11 - 15条数据 截取 data.slice(10,15)
总结:
截取数据的开始下标为 : **( ** 页码-1)*条数
截取数据的结束下标为 : 开始下标+条数
1. 面向对象框架
2. 数据渲染
1. 封装一个render()方法写渲染，每次渲染的数据不同，通过传参获取
2. 通过**map().join(‘’)**渲染到指定盒子中
**3. ** 页码渲染
1.封装一个**renderPage()**方法，拿到总页码，总页码 = 数据总条数/每页条数
2.使用for循环渲染页码
3.设置当前页码高亮
**4. ** 页码切换
1.在各种事件中，都需要根据截取的数据，重新调用渲染数据和渲染页码方法，所以封装一个公用的use方法集中调用
2.给页码大盒子绑定点击事件，利用事件委托找到每一个切换分页按钮
3.点击下一页，当前页码++，最大限定，调用渲染方法，传递下一页数据
4.点击上一页，当前页码--，最小为1，调用渲染方法，传递上一页数据
5.点击分页器，当前页码 = 事件源.innerHTML，调用渲染方法，传递数据
5. 条数切换
给条数下拉列表绑定change事件，改变后重新调用渲染，修改当前页码为1
6. 排序
1.给排序下拉列表绑定change事件,使用sort()方法进行排序
2.根据下拉列表的value值进行排序
3.等级是字母需要利用charCodeAt()转码后排序
4.排序后重新调用渲染方法
7. 模糊搜索
1. 给文本框绑定失去焦点事件blur，根据文本框的内容去筛选数据(filter())
2. 根据筛选后的数据重新调用渲染方法
#二．今日小结
1. 分页中截取数据的开始下标为 : **( ** 页码-1)*条数
2. 分页中截取数据的结束下标为 : 开始下标+条数
3. 分页中获取页码: Math.ceil(总条数/每页条数)
4. 数组方法: **filter() ** 筛选 slice()截取 sort()排序
5. 查找字符串返回布尔值: includes()
#三．作业 -- 楼层
效果图:
功能思路分析:
1. 自己模拟数据，渲染菜单和列表（每道菜的信息需要包括：图片，标题，价格）
2. 点击每一道菜出现弹窗，弹窗内显示对应的图片、菜名和价钱（渐隐渐现的动画效果，通过修改opacity实现）
3. 弹框是用面向对象封装好的，此处只需要new实例化调用
4. 点击价格，按照价格从高到低对数据进行排序（sort()）
5. 再次点击，按照价格从低到高进行排序