jQuery入门（七）jQuery实现按钮分页
一、分页案例分析功能分析：使用分页插件，实现分页，效果如下图：
https://img2024.cnblogs.com/blog/527658/202409/527658-20240901203753904-1109567408.png
二、实现思路和代码
2.1）页面实现分析
1.引入分页插件的样式文件和 js 文件。
2. 定义当前页码和每页显示的条数。(分页必备信息)
3. 调用查询数据的函数。
4. 定义哀求查询分页数据的函数，发起 AJAX 异步哀求。
5. 为分页按钮区域设置页数参数(总页数和当前页)。(设置分页插件参数,展示分页条)
6. 为分页按钮绑定单击事件,完成上一页下一页查询功能。(设置分页插件,绑定事件)
页面代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<link rel="stylesheet" href="css/tt.css">
<link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<span class="top-left">下载APP</span>
<span class="top-left"> 北京 晴天</span>
<span class="top-right">更多产品</span>
<a>
</a>
<ul>
<li>
<a class="channel-item active" target="_blank" href="https://www.cnblogs.com/#">
<span>
推荐
</span>
</a>
</li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
视频
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
热点
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
直播
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
图片
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
娱乐
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
游戏
</span>
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
<span>
体育
</span>
</a></li>
</ul>
<ul class="news_list">
</ul>
</body>
</html>
2.2） 服务器实现分析
1. 获取哀求参数。(当前页码和每页条数)
2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象
3. 封装 PageInfo 对象。
4. 将得到的数据转为 json。
5. 将数据响应给客户端。
服务器代码实现：
public class NewsServlet2 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数(当前页码和每页条数)
String start = req.getParameter("start");
String pageSize = req.getParameter("pageSize");
//2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
NewsService service = new NewsServiceImpl();
Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
//3.封装PageInfo对象
PageInfo<List<News>> info = new PageInfo<>(page);
//4.将得到的数据转为JSON
String json = new ObjectMapper().writeValueAsString(info);
//5.将数据响应给客户端
resp.getWriter().write(json);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
}
成功实现。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]