ToB企服应用市场:ToB评测及商务社交产业平台

标题: jQuery入门（七）jQuery实现按钮分页 [打印本页]
作者: 大连全瓷种植牙齿制作中心    时间: 2024-9-1 20:02
标题: jQuery入门（七）jQuery实现按钮分页
一、分页案例分析
功能分析：使用分页插件，实现分页，效果如下图：
 

 
二、实现思路和代码
        2.1）页面实现分析
  1.引入分页插件的样式文件和 js 文件。
  2. 定义当前页码和每页显示的条数。(分页必备信息)
  3. 调用查询数据的函数。
  4. 定义哀求查询分页数据的函数，发起 AJAX 异步哀求。
  5. 为分页按钮区域设置页数参数(总页数和当前页)。(设置分页插件参数,展示分页条)
  6. 为分页按钮绑定单击事件,完成上一页下一页查询功能。(设置分页插件,绑定事件)
页面代码实现：
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>网站首页</title>
  6.     <link rel="stylesheet" href="css/tt.css">
  7.     <link rel="stylesheet" href="css/simplePagination.css">
  8. </head>
  9. <body>
  11.     <span class="top-left">下载APP</span>
  12.     <span class="top-left"> 北京         晴天</span>
  13.     <span class="top-right">更多产品</span>
  18.    
  19.         <a>
  20.             
  21.         </a>
  23.         <ul>
  24.             <li>
  25.                 <a class="channel-item active" target="_blank" href="https://www.cnblogs.com/#">
  26.                     <span>
  27.                         推荐
  28.                     </span>
  29.                 </a>
  30.             </li>
  32.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  33.                 <span>
  34.                     视频
  35.                 </span>
  36.             </a></li>
  38.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  39.                 <span>
  40.                     热点
  41.                 </span>
  42.             </a></li>
  44.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  45.                 <span>
  46.                     直播
  47.                 </span>
  48.             </a></li>
  50.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  51.                 <span>
  52.                     图片
  53.                 </span>
  54.             </a></li>
  56.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  57.                 <span>
  58.                     娱乐
  59.                 </span>
  60.             </a></li>
  62.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  63.                 <span>
  64.                     游戏
  65.                 </span>
  66.             </a></li>
  68.             <li><a class="channel-item" target="_blank" href="https://www.cnblogs.com/#">
  69.                 <span>
  70.                     体育
  71.                 </span>
  72.             </a></li>
  73.         </ul>
  75.    
  76.    
  77.        <ul class="news_list">
  78.          
  79.         </ul>
  82.         
  83.             
  84.                
  85.             
  86.         
  88.    
  90. </body>
  94. </html>
复制代码
 
        2.2） 服务器实现分析
   1. 获取哀求参数。(当前页码和每页条数)
    2. 根据当前页码和每页显示的条数，调用业务层的方法，得到分页 Page 对象
    3. 封装 PageInfo 对象。
    4. 将得到的数据转为 json。
    5. 将数据响应给客户端。
服务器代码实现：
  1. public class NewsServlet2 extends HttpServlet {
  2.     @Override
  3.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4.         //设置请求和响应的编码
  5.         req.setCharacterEncoding("UTF-8");
  6.         resp.setContentType("text/html;charset=UTF-8");
  8.         //1.获取请求参数(当前页码和每页条数)
  9.         String start = req.getParameter("start");
  10.         String pageSize = req.getParameter("pageSize");
  12.         //2.根据当前页码和每页显示的条数来调用业务层的查询方法，得到分页Page对象
  13.         NewsService service = new NewsServiceImpl();
  14.         Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));
  16.         //3.封装PageInfo对象
  17.         PageInfo<List<News>> info = new PageInfo<>(page);
  19.         //4.将得到的数据转为JSON
  20.         String json = new ObjectMapper().writeValueAsString(info);
  22.         //5.将数据响应给客户端
  23.         resp.getWriter().write(json);
  25.     }
  27.     @Override
  28.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  29.         doPost(req,resp);
  30.     }
  31. }
复制代码
 

成功实现。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4