黑马程序员技术交流社区

标题: 【郑州校区】基于 BootStrap + AngularJS 实现自定义分页 [打印本页]

---

作者: 我是楠楠    时间: 2019-6-18 16:34
标题: 【郑州校区】基于 BootStrap + AngularJS 实现自定义分页

【郑州校区】基于 BootStrap + AngularJS 实现自定义分页  

1、 表格部分  

[attach]289010[/attach]

2、 分页工具条部分  

[attach]289011[/attach]

3、 使用 Angular 动态加载数据，显示动态数据表格  

4、 基于 Angular 实现分页工具条功能   

流程分析 ：

1） 客户端发送给服务器 两个参数 ： 当前页码， 每页记录条数

2） 服务器端 根据当前页码和每页记录条数 查询结果返回： 总记录数，当前页数据

3） 客户端将返回当前页数据显示到表格中，根据返回总记录和每页记录条数，计算总页数，根据总页数和当前页码，显示分页工具条 （百度 默认显示 10 个页码，当前页居中 ）

在工具条上，将静态数据换为动态数据，绑定点击事件  

         prev() 加载上一页数据显示           next() 加载下一页数据显示           selectPage(page) 加载指定页数据显示           isActivePage(page) 判断是否为当前显示页码   将显示所有页码，加入 pageList 集合对象，遍历显示出来  

服务器返回数据格式 修改 6_1.json  

分页工具条显示 10 个页码代码分析  

file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml13828\wps41.png

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2