当前位置：首页 > news >正文

Java Web项目后台管理系统之内容管理仿写：内容、搜索、页码加载

news 2025/8/12 5:31:19

一、进入页面加载数据
- （一）测试是否能正常发起请求：使用jquery+ajax
- （二）后端接受请求
- （三）前端进入页面查找
- （四）涉及到的知识点总结
二、点击按钮搜索
- （一）前端发起请求
- （二）后端接受请求
- （三）前端回调函数success处理
- （四）涉及到的知识点总结
三、精简代码：加载数据方法
- （一）定义一个加载数据的方法
四、加载栏目：栏目搜索变动态
- （一）前端加载栏目
- （二）后端接受请求
- （三）前端回调函数success处理
- （四）html无栏目对应代码，前端回调函数success处理
五、加载页码
- （一）进入页码加载页码
- - 1. 前端发起请求
  - 2. 后端接受请求
  - 3. 前端回调函数success处理
  - 4. 涉及到的知识点总结
- （二）任意页码切换
- - 涉及到的知识点总结
- （三）首页切换
- （四）尾页切换
- （五）上一页/下一页切换
- - 问题：最有一页时，点击搜索，没有返回到第一页
  - 涉及到的知识点总结
完整代码
- SearchContent.java
- SearchChannel.java
- GetCount.java
- content.js

提示：新手写项目，写一步确定一步是否成功，可以每写一部分代码打印一下查看是否出错，减少时间的浪费。
又是数据加载不出来，需要清空浏览记录。

一、进入页面加载数据

创建content.js文档

（一）测试是否能正常发起请求：使用jquery+ajax

在content.js文档中，发起请求，确定url、type、success、error，首先确定页面能成功发出请求
- url：找对应的页面地址
- type：由于是查询数据，使用get请求，进入页面查找，不用带参数
- success：回调函数，对返回的数据进行处理，继续致谢后续操作
- error：新手可加上，判断请求失败，如果项目没问题，是不会走到这一步
- 页面请求成功可继续操作
```
$.ajax({url:"SearchServlet",typr:"get",success:function(value){alert("请求成功")},error:function(){alert("出错啦")}
```

（二）后端接受请求

在SearchServlet.java文档中确定请求是否接收到

/*** Servlet implementation class Search*/
@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("请求接受到了");	}
}

查询，不需要接受参数，需要拼接sql
- 写出要执行的sql查询语句
- 指定要包含结果中的列名，（前提：sql就要查出来），分装json，例如：查询语句返回来的数据中没有id，就不能返回使用id
- 将查询结果转换为json格式，返回给json字符串

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//sqlString sql = "select content.*,channelname from content,channel where content.channelid = channel.id order by createtime desc";String[] colums = {"id","title","createtime","auther","imgurl","content","channelid"};String res = MysqlUtil.getJsonBySql(sql, colums);}

设置后端给前端返回信息为json，并返回数据，返回到value中

//设置后端给前端返回信息为json
response.setContentType("text/json;charset=utf-8");
//返回数据
response.getWriter().write(res);

到此，查找后端写好了。

（三）前端进入页面查找

先清空先前有的内容
追加想要的效果，字符串拼接，通过下标拿到对应的内容，这样旧不会写死了
若时间想精确到年月，可使用字符串裁剪（substring(开始,结束)），要头不要尾

//进入页面加载数据
$.ajax({url:"SearchServlet",typr:"get",success:function(value){var arr = value.data//清空tbody内容$("tbody").empty()//追加内容效果for(var i=0;i<arr.length;i++){$("tbody").append('<tr>+'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+//substring裁剪'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+'<td>'+'<input type="button" value="修改" class="update">'+'<input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("出错了")}
})

到此，前端进入页面查询写好了。

（四）涉及到的知识点总结

MysqlUtil：自定义的工具类，包含于MySQL交互的各种使用方法
- .getJsonBySql(sql, colums)静态方法，用于执行SQL查询并返回json格式的结果
- 参数：sql：要执行的SQL语句；columns：指定要包含json将结果中的了列名
- 主要功能：
  - 1.连接数据库；
  - 2.执行传入的SQL查询；
  - 3.将查询结果转换为json格式；
  - 4.返回json字符串
response对象：返回数据
- setContentType()方法：设置HTTP响应内容类型，告诉浏览器如何解析返回的数据，可以一并设置编码
- getWriter()方法：字符串输出，通常与write()使用
- write()方法：写入字符串，将字符串写入HTTP响应体
jquery提供的方法：
- empty()：清除
- append()：追加
substring(开始,结束)：字符串裁剪

二、点击按钮搜索

（一）前端发起请求

绑定事件
使用class属性值，获取输入框数据
发起请求，参数域设置动态，属性和属性值一样可以只写一遍

//点击按钮搜索
$(".search").click(function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()//发起请求$.ajax({url:"SearchContent",type:"get",data:{
//			channelid:channelid,
//			title:title,
//			author:authorchannelid,title,author},success:function(value){console.log(value)},error:function(){alert("出错了")}})
})

（二）后端接受请求

接受参数
动态sql：用逻辑去拼接sql语句
- sql语句起始
- 判断channelid不是空，且不等于0
- 判断title不是空，且不为0
- 判断author不是空，且不为0
- sql语句结尾
传有那些字段字段，调方法
设置后端给前端返回信息为json，返回数据

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接受参数String channelid = request.getParameter("channelid");String title = request.getParameter("title");String author = request.getParameter("author");//2. 动态sql 用逻辑去拼接sql语句String sql = "select content.*,channelname from content,channel where content.channelid = channel.id";if(channelid!=null && !channelid.equals("0")) {sql += " and channelid = "+channelid;}if(title!=null && !title.equals("")) {sql += "  and title like \"%"+title+"%\"";}if(author!=null && !author.equals("")) {sql += " and author=\""+author+"\"";}sql += " order by createtime desc";//3. 传有那些字段字段，调方法String[] colums = {"id","title","createtime","author","imgurl","content","channelid","channelname"};String res = MysqlUtil.getJsonBySql(sql, colums);//4. 设置后端给前端返回信息为json，返回数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);
}

（三）前端回调函数success处理

返回的数据传到value中
清空tbody内容
有几条信息，追加几条内容

//点击按钮搜索
$(".search").click(function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()//发起请求$.ajax({url:"SearchContent",type:"get",data:{
//			channelid:channelid,
//			title:title,
//			author:authorchannelid,title,author},success:function(value){var arr = value.data//清空tbody内容$("tbody").empty()//有几条信息，追加几条内容for(var i=0;i<arr.length;i++){$("tbody").append('<tr>+'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+//substring裁剪'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+'<td>'+'<input type="button" value="修改" class="update">'+'<input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("出错了")}})
})

（四）涉及到的知识点总结

request对象：客户端（如浏览器）向服务器发送请求，Servlet容器（如Tomcat）会创建一个HttpServletRequest对象，其中包含所有的请求信息。
- getParameter()方法：用于获取客户端发送的请求参数

三、精简代码：加载数据方法

从上面的代码可看出：

success回调函数，继续执行后续操的代码冗余
后续可能还需要多次重复写这些代码
后续对代码的可维护性不好，要修改多个地方
所有，可以进行代码合并精简：写一个加载数据的方法。

（一）定义一个加载数据的方法

当channelid、title、author为空时，完全与进入页面加载数据的sql语句一样。
所以，进入页面加载数据的success操作完全可以合并到点击按钮搜索的success操作中，只访问SearchContent页面即可。

//加载数据
var loadData = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()//发起请求$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author},success:function(value){var arr = value.data//清空tbody内容$("tbody").empty()//有几条信息，追加几条内容for(var i=0;i<arr.length;i++){$("tbody").append('<tr>+'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+//substring裁剪'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+'<td>'+'<input type="button" value="修改" class="update">'+'<input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("出错了")}})
}

进入页面加载数据，直接调用这个方法就行了

loadData()

点击按钮搜索，也是直接调方法

//点击按钮搜索
$(".search").click(function(){loadData()
})

四、加载栏目：栏目搜索变动态

（一）前端加载栏目

//加载栏目
$.ajax({url:"SearchChannel",typr:"get",success:function(value){console.log(value)},error:function(){alert("出错了")}
})

（二）后端接受请求

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String sql = "select * from channel";String[] colums = {"id", "channelname"};String res = MysqlUtil.getJsonBySql(sql, colums);//设置后端给前端返回信息为json，返回数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);
}

（三）前端回调函数success处理

html文件中栏目对应的代码没有删除
清掉channelid容器的内容
追加栏目内容

//加载栏目
$.ajax({url:"SearchChannel",typr:"get",success:function(value){var arr = value.data$(".channelid").empty()$(".channelid").append('<option value="0">全部</option>')for(var i=0;i<arr.length;i++){$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')}},error:function(){alert("出错了")}
})

（四）html无栏目对应代码，前端回调函数success处理

html文件中栏目对应的代码删除了
运行项目会发现SearchContent.js文件中的动态sql报问题：channelid为空，后端会认为没有传参数
栏目搜索框固定为全部，进入页面，没有数据，再点击一下搜索，会出现数据，因为：ajax请求是异步的
将异步变为同步，在ajax操作中加入：async:false

五、加载页码

（一）进入页码加载页码

1. 前端发起请求

在加载数据中的参数域添加page、pageSize

var page = 1
var pageSize = 4//加载数据
var loadData = function(){//获取输入框代码不变……//发起请求$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author,page,pageSize},//……
}

不能将page、pageSize写死，否则，用户使用不方便，所以，将其设置为动态实时
写一个加载页码的方法

//加载页码
var loadPage = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"GetCount",type:"get",data:{channelid,title,author},success:function(value){console.log("value")},error:function(){alert("出错了")}})
}

进入页码时要加载页码，点击搜索时也要加载页码。

2. 后端接受请求

将点击按钮搜索中后端写的动态sql语句添加上分页查找限制
接受page、pageSize的请求参数，并将其赋给对应的变量
由于是String类型的数据，不能做运算，要用基本数据类型对应的包装类进行转换

//动态sql 用逻辑去拼接sql语句
String sql = "select content.*,channelname from content,channel where content.channelid = channel.id";
if(channelid!=null && !channelid.equals("0")) {sql += " and channelid = "+channelid;
}
if(title!=null && !title.equals("")) {sql += "  and title like \"%"+title+"%\"";
}
if(author!=null && !author.equals("")) {sql += " and author=\""+author+"\"";
}
sql += " order by createtime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;

在前端写的加载页码方法中，在GetCount页面中设置sql拼接

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//接收参数String channelid = request.getParameter("channelid");String title = request.getParameter("title");String author = request.getParameter("author");//动态sql，拼接String sql = "select count(*) from content,channel where content.channelid = channel.id";if(channelid!=null && !channelid.equals("0")) {sql += " and channelid = "+channelid;}if(title!=null && !title.equals("")) {sql += "  and title like \"%"+title+"%\"";}if(author!=null && !author.equals("")) {sql += " and author=\""+author+"\"";}//返回的是String类型，用valueOf方法进行数据类型转换int num = MysqlUtil.getCount(sql);String res = String.valueOf(num);//设置后端给前端返回信息为json，返回数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);
}

3. 前端回调函数success处理

页码没有半页，设置为向上取整
追加页码
设置样式，当前页码有样式，其他页码没有样式

//加载页码
var loadPage = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"GetCount",type:"get",data:{channelid,title,author},success:function(value){var count = Math.ceil(value/pageSize)$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='pav'>上一页</li>")for(var i=0;i<count;i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一位</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("出错了")}})
}

4. 涉及到的知识点总结

MysqlUtil调用的方法：
- getCount()：统计
字符串调用的方法：
- valueOf()：将其他类型转换为字符串类型
Math中的方法
- ceil()方法：向上取整

（二）任意页码切换

无论是进入页码还是搜索，总是访问的第一页
要想进行任意页码切换，写一个任意页码切换的方法
由于按钮是在某些方法追加出来的，所以用已有元素去找，第三种绑定事件的方式
数据切换
- 使用this，点击当前事件
- 使用text()方法，获取文本信息
- 调用加载数据loadData方法
样式切换
- 使用this，点击当前事件
- 设置为当前点击添加样式，其他的去掉样式

//任意页码切换
$(".page").on("click",".item",function(){//数据切换page = $(this).text()loadData()//样式切换$(this).addClass("current")$(this).siblings().removeClass("current")
})

涉及到的知识点总结

text()方法：获取文本信息
addClass()方法：添加样式
siblings()方法：找当前被点击的兄弟元素
removeClass()方法：去掉样式

（三）首页切换

只给第一页加样式，其它的都去掉样式

//首页切换
$(".page").on("click",".first",function(){//数据切换page = 1loadData()//样式切换$(".item").removeClass("current")$(".item").first().addClass("current")
})

链式写法：针对同一个元素，有多个处理，可以在后边不间断的调用方法

$(".item").removeClass("current").first().addClass("current")

（四）尾页切换

//尾页切换
$(".page").on("click",".last",function(){//数据切换page = $(".item").lengthloadData()//样式切换$(".item").removeClass("current")$(".item").last().addClass("current")
})

当上一页到达第一页时，禁止继续点击；当下一页到达最后一页时，也设置为禁止继续点击。

//上一页切换
$(".page").on("click",".pav",function(){if(page==1){$(".item").disabled()//禁止点击上一页按钮return}//数据切换page--loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})
//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){$(".item").disabled()//禁止点击上一页按钮return}//数据切换page++loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})

问题：最有一页时，点击搜索，没有返回到第一页

在点击按钮搜索部分的代码，设置页码初始值为1

涉及到的知识点总结

jQuery提供的方法;

eq()方法：指定索引号的元素
disabled()方法：禁用，这个方法不接受任何参数

完整代码

SearchContent.java

package com.qcby.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qcby.db.MysqlUtil;import sun.management.counter.Variability;/*** Servlet implementation class SearchContent*/
@WebServlet("/SearchContent")
public class SearchContent extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchContent() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接受参数String channelid = request.getParameter("channelid");String title = request.getParameter("title");String author = request.getParameter("author");//2. 动态sql 用逻辑去拼接sql语句String sql = "select content.*,channelname from content,channel where content.channelid = channel.id";if(channelid!=null && !channelid.equals("0")) {sql += " and channelid = "+channelid;}if(title!=null && !title.equals("")) {sql += "  and title like \"%"+title+"%\"";}if(author!=null && !author.equals("")) {sql += " and author=\""+author+"\"";}sql += " order by createtime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;//3. 传有那些字段字段，调方法String[] colums = {"id","title","createtime","author","imgurl","content","channelid","channelname"};String res = MysqlUtil.getJsonBySql(sql, colums);//4. 设置后端给前端返回信息为json，返回数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}
}

SearchChannel.java

package com.qcby.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qcby.db.MysqlUtil;/*** Servlet implementation class SearchChannel*/
@WebServlet("/SearchChannel")
public class SearchChannel extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchChannel() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String sql = "select * from channel";String[] colums = {"id", "channelname"};String res = MysqlUtil.getJsonBySql(sql, colums);//设置后端给前端返回信息为json，返回数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}
}

GetCount.java

package com.qcby.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.qcby.db.MysqlUtil;/*** Servlet implementation class GetCount*/
@WebServlet("/GetCount")
public class GetCount extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public GetCount() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//接收参数String channelid = request.getParameter("channelid");String title = request.getParameter("title");String author = request.getParameter("author");//动态sql，拼接String sql = "select count(*) from content,channel where content.channelid = channel.id";if(channelid!=null && !channelid.equals("0")) {sql += " and channelid = "+channelid;}if(title!=null && !title.equals("")) {sql += "  and title like \"%"+title+"%\"";}if(author!=null && !author.equals("")) {sql += " and author=\""+author+"\"";}//返回的是String类型，用valueOf方法进行数据类型转换int num = MysqlUtil.getCount(sql);String res = String.valueOf(num);//返回数据response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}
}

content.js

//加载栏目
$.ajax({url:"SearchChannel",typr:"get",async:false,success:function(value){var arr = value.data$(".channelid").empty()$(".channelid").append('<option value="0">全部</option>')for(var i=0;i<arr.length;i++){$(".channelid").append('<option value="'+arr[i].id+'">'+arr[i].channelname+'</option>')}},error:function(){alert("出错了")}
})var page = 1
var pageSize = 10//加载数据
var loadData = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()//发起请求$.ajax({url:"SearchContent",type:"get",data:{channelid,title,author,page,pageSize},success:function(value){var arr = value.data//清空tbody内容$("tbody").empty()//有几条信息，追加几条内容for(var i=0;i<arr.length;i++){$("tbody").append('<tr>+'+'<td><input type="checkbox"></td>'+'<td>'+arr[i].id+'</td>'+'<td>'+arr[i].channelname+'</td>'+'<td>'+arr[i].title+'</td>'+'<td>'+arr[i].createtime.substring(0,10)+'</td>'+//substring裁剪'<td>'+arr[i].author+'</td>'+'<td><img src="img/bg01warp.png" alt=""></td>'+'<td>'+'<input type="button" value="修改" class="update">'+'<input type="button" value="删除" class="delete">'+'</td>'+'</tr>')}},error:function(){alert("出错了")}})
}//加载页码
var loadPage = function(){//获取输入框数据var channelid = $(".channelid").val()var title = $(".title").val().trim()var author = $(".author").val().trim()$.ajax({url:"GetCount",type:"get",data:{channelid,title,author},success:function(value){var count = Math.ceil(value/pageSize)$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='pav'>上一页</li>")for(var i=0;i<count;i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一位</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("出错了")}})
}//进入页面加载数据
loadData()
//进入页面加载页码
loadPage()//点击按钮搜索
$(".search").click(function(){page = 1loadData()loadPage()
})//任意页码切换
$(".page").on("click",".item",function(){//数据切换page = $(this).text()loadData()//样式切换$(this).addClass("current")$(this).siblings().removeClass("current")
})//首页切换
$(".page").on("click",".first",function(){//数据切换page = 1loadData()//样式切换$(".item").removeClass("current")$(".item").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换page = $(".item").lengthloadData()//样式切换$(".item").removeClass("current")$(".item").last().addClass("current")
})//上一页切换
$(".page").on("click",".pav",function(){if(page==1){$(".item").disabled()//禁止点击上一页按钮return}//数据切换page--loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})
//下一页切换
$(".page").on("click",".next",function(){if(page==$(".item").length){$(".item").disabled()//禁止点击上一页按钮return}//数据切换page++loadData()//样式切换$(".item").removeClass("current")$(".item").eq(page-1).addClass("current")
})