![37f8533d0a232fb1e72c96cfb0ce39f9.png](https://i-blog.csdnimg.cn/blog_migrate/f6d405afba92f5728021731383d4d0b0.jpeg)
大好,我来了,本期为大家带来的前端入门知识是”前后端交互与Node:蓝莓派分页项目“,有兴趣做前端的朋友,和我一起来看看吧!
主要内容
- 分页插件介绍
- 分页器样式
- 分页元素动态创建
- 分页页码显示
- 点击分页切换页码
- 动态添加分页数据
学习目标
![9202d993511a25e05e4d676fccc4ab71.png](https://i-blog.csdnimg.cn/blog_migrate/d235f024c2f5f0bd8d24a001e9aef405.jpeg)
第一节分页器介绍
1.1 分页器介绍
![9a50598f455f1c06a825d6cff3c1565f.png](https://i-blog.csdnimg.cn/blog_migrate/69612c11723ccd0dfdc86756f68f74e1.jpeg)
http://www.jq22.com/search?seo=%E5%88%86%E9%A1%B5%E5%99%A8
1.2 插件的下载和使用
1.3 蓝莓酱分页器实现思路
思路:
1.分页器动态创建的 根据总的页码数 和当前选中页码 动态创建分页器
2.从左到右创建追加span标签
1.4分页器静态布局
![099b42f3c5b702bc4bfc95d0c8517c97.png](https://i-blog.csdnimg.cn/blog_migrate/9f03f45654cba80c7ad8e3561d2dc95f.jpeg)
![c993699709881a85da7ae6e4714ba327.png](https://i-blog.csdnimg.cn/blog_migrate/84989293edc96adc6ebaea397dda95b6.png)
第二节动态创建分页器
2.1 创建首页 上一页
![09af800be9db944723175d287646c650.png](https://i-blog.csdnimg.cn/blog_migrate/5e67b0279c8bba6df344e7469d305d03.jpeg)
2.2页码创建
![059c7e56dc1cd160fadd8a8552acea94.png](https://i-blog.csdnimg.cn/blog_migrate/81764a28d248fa51e8ccaed14d2fb9b5.jpeg)
2.3尾页 下一页创建
![c0dec1bee79ce905dc07843096b4229c.png](https://i-blog.csdnimg.cn/blog_migrate/7a63d1c2c50700d75eb604cf6351f804.jpeg)
本章作业
根据总的页码数和当前选中的页码 实现动态创建分页器
第三节分页器js切换效果
3.1 点击分页页码和首页尾页
![efdcfbe752b157a519937d69d0292870.png](https://i-blog.csdnimg.cn/blog_migrate/735a562fdf0b94dfd237903e40c186b6.jpeg)
3.2 上一页 下一页
![eaf900fbe52cd6783ed803e1910662ae.png](https://i-blog.csdnimg.cn/blog_migrate/1880f559262d14e3732a25acfb55c2f2.jpeg)
本章作业
点击页码对应的切换页码
第四节分页器与ajax结合
4.1 动态获取数据
![1b1d6313f957aad58ec735b9f07686ec.png](https://i-blog.csdnimg.cn/blog_migrate/9bdbdcb6bb3f6e99451e82cb6558198c.jpeg)
4.2 分页与ajax结合
![2810b49740779d447258d3fcc4680a1e.png](https://i-blog.csdnimg.cn/blog_migrate/49687c5d8902c0acdc3118d2cba1b632.jpeg)
![5e3c06601297e6998ae1d3a05755e562.png](https://i-blog.csdnimg.cn/blog_migrate/5a5526a5d4f394220febeee66d0b6b00.jpeg)
本章作业
分页器与ajax动态结合
好了,本期的前端知识”前后端交互与Node:蓝莓派分页项目“到此结束了,对前端开发有兴趣的朋友关注我,更多内容等你来看,我们下期再见!