jQuery入门（七）jQuery实现按钮分页

大连全瓷种植牙齿制作中心 · 2024-9-1 20:02:28

一、分页案例分析
功能分析：使用分页插件，实现分页，效果如下图：

二、实现思路和代码
      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>
下载APP
北京晴天
更多产品
<a>
</a>
<ul>
<li>
<a class="channel-item active" target="_blank" href="https://www.cnblogs.com/#">
推荐
</a>
</li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
视频
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
热点
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
直播
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
图片
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
娱乐
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
游戏
</a></li>
<li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
体育
</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企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

jQuery入门（七）jQuery实现按钮分页

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云