系列文章目录
文章目录
- 系列文章目录
- 01-管理员维护-分页导航条-准备工作
- 02-分页导航条-初始化函数
- 回调函数的理解
- 3-管理员维护-分页导航条-回调函数
- 测试
01-管理员维护-分页导航条-准备工作
我们现在要做的事情就是要把假的页码变成真的
现在我们做到的程度就是
后台代码已经全部完成
并且我们已经测试过了，那么下面我们该做什么呢
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript](https://s2.51cto.com/images/blog/202302/15164347_63ec9b431b22636644.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_02](https://s2.51cto.com/images/blog/202302/15164347_63ec9b43ad51011045.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
虽然自己算也行，但是比较麻烦，用别人的工具会比较省事一点
那么我们怎么做呢？
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_03](https://s2.51cto.com/images/blog/202302/15164347_63ec9b43f023938810.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_04](https://s2.51cto.com/images/blog/202302/15164348_63ec9b4424a2131030.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
先引入js代码
引入全部完成之后我们再来看它的js代码是怎么写的
注意位置一定是在head标签后面，因为我们之前的base标签都是写在include-head.jsp里面的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_05](https://s2.51cto.com/images/blog/202302/15164348_63ec9b44776da57789.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
如果写在前面就没办法使用到base标签
这里注意路径需要改一下
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_06](https://s2.51cto.com/images/blog/202302/15164348_63ec9b44d16fe3203.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_07](https://s2.51cto.com/images/blog/202302/15164349_63ec9b456648282384.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_08](https://s2.51cto.com/images/blog/202302/15164349_63ec9b45a7cdc65416.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_09](https://s2.51cto.com/images/blog/202302/15164350_63ec9b460577285559.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
替换掉之前写死的页码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_10](https://s2.51cto.com/images/blog/202302/15164350_63ec9b4648cdf36484.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_11](https://s2.51cto.com/images/blog/202302/15164350_63ec9b46983f731379.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_12](https://s2.51cto.com/images/blog/202302/15164350_63ec9b46dbe2394820.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
02-分页导航条-初始化函数
下面我们开始看上面那个demo的js代码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_13](https://s2.51cto.com/images/blog/202302/15164351_63ec9b470a83387891.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
什么是初始化函数呢？
我们看这段简单的代码
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_14](https://s2.51cto.com/images/blog/202302/15164351_63ec9b473f57485186.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
这就是一个初始化函数
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_15](https://s2.51cto.com/images/blog/202302/15164351_63ec9b479771985278.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_16](https://s2.51cto.com/images/blog/202302/15164351_63ec9b47d79ee21570.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
但是这个函数又没在什么返回值，这就给我们整不会了所以老师觉得这个代码纯属于故弄玄虚
用我们现在的话来说，那就是纯属于装X
所以说，没有必要整得这么花里胡哨
你不就是要做一个初始化吗，所以我们这样写，实实在在的写
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_17](https://s2.51cto.com/images/blog/202302/15164352_63ec9b485ab2042931.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_18](https://s2.51cto.com/images/blog/202302/15164352_63ec9b48c5d5229755.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
所以我们只需要看这部分代码(初始化那部分就不用看了)
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_19](https://s2.51cto.com/images/blog/202302/15164353_63ec9b490676f48273.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_20](https://s2.51cto.com/images/blog/202302/15164353_63ec9b49384c869401.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_21](https://s2.51cto.com/images/blog/202302/15164353_63ec9b498fa0783927.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
乾隆的后代有哪些呢？
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_22](https://s2.51cto.com/images/blog/202302/15164354_63ec9b4a0681122452.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_23](https://s2.51cto.com/images/blog/202302/15164354_63ec9b4a7a78e5099.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
就是我们分页的长度，就是数了一下，比如这里就是8
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_24](https://s2.51cto.com/images/blog/202302/15164354_63ec9b4ae43f570723.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
因为是个数值，所以我们不加引号也可以
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_25](https://s2.51cto.com/images/blog/202302/15164355_63ec9b4b3d59774559.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
回调函数的理解
回调怎么去理解，我们跟外国人就要反着干，
外国人叫调回，我们叫回调
这样就好理解了
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_26](https://s2.51cto.com/images/blog/202302/15164355_63ec9b4b9bd7296778.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
把这个函数拿出来，
注意，名字我们是可以改的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_27](https://s2.51cto.com/images/blog/202302/15164355_63ec9b4bc722562642.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
再往下是设置每页显示多少条
那么这些写完以后就可以了吗
实际上还不行，继续看bootstrap给我们提供的参考文档
我们还需要设置一下这个参数
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_28](https://s2.51cto.com/images/blog/202302/15164356_63ec9b4c1b31025307.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_29](https://s2.51cto.com/images/blog/202302/15164356_63ec9b4c9f22574325.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
其它的参数就不用设置了，不设置系统就会用默认值
3-管理员维护-分页导航条-回调函数
怎么理解回调函数呢，百度上是这么说的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_30](https://s2.51cto.com/images/blog/202302/15164357_63ec9b4d2206f13741.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
但是我们这里是js，所以结合具体情况大致可以这么理解
什么叫回调函数，回调函数就是声明以后不是我们自己来调用，
而是交给别人来调用
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_bootstrap_31](https://s2.51cto.com/images/blog/202302/15164357_63ec9b4d9e3cb65509.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
所以
最终的代码是这样的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_javascript_32](https://s2.51cto.com/images/blog/202302/15164358_63ec9b4e331ea42455.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
关键词可以先不带，因为下一篇才讲，但是页码必须带上，不然单纯靠前端是无法分页的
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_分页_33](https://s2.51cto.com/images/blog/202302/15164358_63ec9b4e6e68d50900.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
测试
输入地址：
http://localhost:8080/atcrowdfunding02-admin-webui//admin/to/login.ht
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_css_34](https://s2.51cto.com/images/blog/202302/15164358_63ec9b4ed855a18622.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
![项目一众筹网03_0_[同步开发]管理员维护(分页 和 管理员的增删改查)——分页导航条使用bootstrap自带的页码插件实现动态页码（回调函数、js怎么跳转页面）_回调函数_35](https://s2.51cto.com/images/blog/202302/15164359_63ec9b4f2fc0d82239.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")
如果有bug就需要自己调一下
解决bug也是一种很重要的能力
根据我们的调试，很明显是有bug的，我们看下一篇文章，来解决这些bug
