系列文章目录
文章目录
- 系列文章目录
- 01-管理员维护-分页导航条-准备工作
- 02-分页导航条-初始化函数
- 回调函数的理解
- 3-管理员维护-分页导航条-回调函数
- 测试
01-管理员维护-分页导航条-准备工作
我们现在要做的事情就是要把假的页码变成真的
现在我们做到的程度就是
后台代码已经全部完成
并且我们已经测试过了，那么下面我们该做什么呢
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页](https://file.cfanz.cn/uploads/png/2023/03/31/14/1O372002W6.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_02](https://file.cfanz.cn/uploads/png/2023/03/31/14/5bY7dZ68UI.png "在这里插入图片描述")
虽然自己算也行，但是比较麻烦，用别人的工具会比较省事一点
那么我们怎么做呢？
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_03](https://file.cfanz.cn/uploads/png/2023/03/31/14/3EKHGFD019.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_04](https://file.cfanz.cn/uploads/png/2023/03/31/14/437OY1eZU9.png "在这里插入图片描述")
先引入js代码
引入全部完成之后我们再来看它的js代码是怎么写的
注意位置一定是在head标签后面，因为我们之前的base标签都是写在include-head.jsp里面的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_05](https://file.cfanz.cn/uploads/png/2023/03/31/14/b5OMJ7b136.png "在这里插入图片描述")
如果写在前面就没办法使用到base标签
这里注意路径需要改一下
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_06](https://file.cfanz.cn/uploads/png/2023/03/31/14/156Gb62658.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_07](https://file.cfanz.cn/uploads/png/2023/03/31/14/8Gf25NA5ec.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_08](https://file.cfanz.cn/uploads/png/2023/03/31/14/2JYdce40c4.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_09](https://file.cfanz.cn/uploads/png/2023/03/31/14/18FBc84a39.png "在这里插入图片描述")
替换掉之前写死的页码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_10](https://file.cfanz.cn/uploads/png/2023/03/31/14/QU8648T1fY.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_11](https://file.cfanz.cn/uploads/png/2023/03/31/14/ETe7212bSE.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_12](https://file.cfanz.cn/uploads/png/2023/03/31/14/8Q69K1E084.png "在这里插入图片描述")
02-分页导航条-初始化函数
下面我们开始看上面那个demo的js代码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_13](https://file.cfanz.cn/uploads/png/2023/03/31/14/8C4C6N0188.png "在这里插入图片描述")
什么是初始化函数呢？
我们看这段简单的代码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_14](https://file.cfanz.cn/uploads/png/2023/03/31/14/5GW6dDD75f.png "在这里插入图片描述")
这就是一个初始化函数
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_15](https://file.cfanz.cn/uploads/png/2023/03/31/14/ZX6a223397.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_16](https://file.cfanz.cn/uploads/png/2023/03/31/14/aLa8E42MEa.png "在这里插入图片描述")
但是这个函数又没在什么返回值，这就给我们整不会了所以老师觉得这个代码纯属于故弄玄虚
用我们现在的话来说，那就是纯属于装X
所以说，没有必要整得这么花里胡哨
你不就是要做一个初始化吗，所以我们这样写，实实在在的写
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_17](https://file.cfanz.cn/uploads/png/2023/03/31/14/76Xcd57Za7.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_18](https://file.cfanz.cn/uploads/png/2023/03/31/14/011N4bGcd2.png "在这里插入图片描述")
所以我们只需要看这部分代码(初始化那部分就不用看了)
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_19](https://file.cfanz.cn/uploads/png/2023/03/31/14/20880U255T.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_20](https://file.cfanz.cn/uploads/png/2023/03/31/14/OC0fb39fU4.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_21](https://file.cfanz.cn/uploads/png/2023/03/31/14/f8T261U7aB.png "在这里插入图片描述")
乾隆的后代有哪些呢？
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_22](https://file.cfanz.cn/uploads/png/2023/03/31/14/667V20M284.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_23](https://file.cfanz.cn/uploads/png/2023/03/31/14/B091M18933.png "在这里插入图片描述")
就是我们分页的长度，就是数了一下，比如这里就是8
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_24](https://file.cfanz.cn/uploads/png/2023/03/31/14/2U1e0d6672.png "在这里插入图片描述")
因为是个数值，所以我们不加引号也可以
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_25](https://file.cfanz.cn/uploads/png/2023/03/31/14/6IBO51WB88.png "在这里插入图片描述")
回调函数的理解
回调怎么去理解，我们跟外国人就要反着干，
外国人叫调回，我们叫回调
这样就好理解了
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_26](https://file.cfanz.cn/uploads/png/2023/03/31/14/3G31Jc0BPe.png "在这里插入图片描述")
把这个函数拿出来，
注意，名字我们是可以改的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_27](https://file.cfanz.cn/uploads/png/2023/03/31/14/e5Q92LA0ca.png "在这里插入图片描述")
再往下是设置每页显示多少条
那么这些写完以后就可以了吗
实际上还不行，继续看bootstrap给我们提供的参考文档
我们还需要设置一下这个参数
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_28](https://file.cfanz.cn/uploads/png/2023/03/31/14/11I8XTA667.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_29](https://file.cfanz.cn/uploads/png/2023/03/31/14/0YY5Y5dQB0.png "在这里插入图片描述")
其它的参数就不用设置了，不设置系统就会用默认值
3-管理员维护-分页导航条-回调函数
怎么理解回调函数呢，百度上是这么说的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_30](https://file.cfanz.cn/uploads/png/2023/03/31/14/11ee5H5N45.png "在这里插入图片描述")
但是我们这里是js，所以结合具体情况大致可以这么理解
什么叫回调函数，回调函数就是声明以后不是我们自己来调用，
而是交给别人来调用
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_31](https://file.cfanz.cn/uploads/png/2023/03/31/14/Cb8614672X.png "在这里插入图片描述")
所以
最终的代码是这样的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_32](https://file.cfanz.cn/uploads/png/2023/03/31/14/R8622F86P9.png "在这里插入图片描述")
关键词可以先不带，因为下一篇才讲，但是页码必须带上，不然单纯靠前端是无法分页的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_33](https://file.cfanz.cn/uploads/png/2023/03/31/14/8Q8O8IIa5V.png "在这里插入图片描述")
测试
输入地址：
http://localhost:8080/atcrowdfunding02-admin-webui//admin/to/login.ht
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_34](https://file.cfanz.cn/uploads/png/2023/03/31/14/J00523431I.png "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_35](https://file.cfanz.cn/uploads/png/2023/03/31/14/4E6AM0Zf16.png "在这里插入图片描述")
如果有bug就需要自己调一下
解决bug也是一种很重要的能力
根据我们的调试，很明显是有bug的，我们看下一篇文章，来解决这些bug
