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

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

news 来源：原创 2024/9/20 4:42:43

一、分页案例分析

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

二、实现思路和代码

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>
<div class="top"><span class="top-left">下载APP</span><span class="top-left"> 北京         晴天</span><span class="top-right">更多产品</span>
</div><div class="container"><div class="left"><a><!--<img src="img/logo.png"><br/>--></a><ul><li><a class="channel-item active" href="#"><span>推荐</span></a></li><li><a class="channel-item" href="#"><span>视频</span></a></li><li><a class="channel-item" href="#"><span>热点</span></a></li><li><a class="channel-item" href="#"><span>直播</span></a></li><li><a class="channel-item" href="#"><span>图片</span></a></li><li><a class="channel-item" href="#"><span>娱乐</span></a></li><li><a class="channel-item" href="#"><span>游戏</span></a></li><li><a class="channel-item" href="#"><span>体育</span></a></li></ul></div><div class="center"><ul class="news_list"></ul><div class="content"><div class="pagination-holder clearfix"><div id="light-pagination" class="pagination"></div></div></div></div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>//1.定义当前页码和每页显示的条数 (分页必备信息)let start = 1;let pageSize = 10;//2.调用查询数据的方法queryByPage(start,pageSize);//3.定义请求查询分页数据的函数，发起AJAX异步请求，将数据显示到页面function queryByPage(start,pageSize) {$.ajax({//请求的资源路径url:"newsServlet2",//请求的参数data:{"start":start,"pageSize":pageSize},//请求的方式type:"POST",//响应数据形式dataType:"json",//请求成功后的回调函数success:function (pageInfo) {//将数据显示到页面let titles = "";for(let i = 0; i < pageInfo.list.length; i++) {titles += "<li>\n" +"                <div class=\"title-box\">\n" +"                    <a href=\"#\" class=\"link\">\n" +pageInfo.list[i].title +"                        <hr>\n" +"                    </a>\n" +"                </div>\n" +"            </li>";}$(".news_list").html(titles);//4.为分页按钮区域设置页数参数（总页数和当前页）$("#light-pagination").pagination({pages:pageInfo.pages,currentPage:pageInfo.pageNum});//5.为分页按钮绑定单击事件,完成上一页下一页查询功能(设置分页插件参数,展示分页条)$("#light-pagination .page-link").click(function () {//获取点击按钮的文本内容let page = $(this).html();//如果点击的是Prev，调用查询方法，查询当前页的上一页数据if(page == "Prev") {queryByPage(pageInfo.pageNum - 1,pageSize);}else if (page == "Next") {//如果点击的是Next，调用查询方法，查询当前页的下一页数据(设置分页插件,绑定事件)queryByPage(pageInfo.pageNum + 1,pageSize);} else {//调用查询方法，查询当前页的数据queryByPage(page,pageSize);}});}});}</script>
</html>

2.2）服务器实现分析

1. 获取请求参数。(当前页码和每页条数)
2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象
3. 封装 PageInfo 对象。
4. 将得到的数据转为 json。
5. 将数据响应给客户端。

服务器代码实现：

public class NewsServlet2 extends HttpServlet {@Overrideprotected 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.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(info);//5.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

成功实现。