经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
纯手写实现ajax分页功能
来源：cnblogs　　作者：?年轻?心跳?　　时间：2019/8/15 12:12:20　　对本文有异议

前言

最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用bootstrap做样式，分页功能用ajax实现，没用其他插件哦，只引入引这些：

  1.     <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
  2.     <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
  3.     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

简介

相关概念：

ajax：异步的javascript和xml 指的是在不刷新网页的情况下，可以和服务器端通信，局部刷新。

bootstrap：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

简析 

主要思路就是写两个ajax方法，一个ajax方法负责更新页数的同时调用另外一个ajax方法，另一个ajax方法负责加载页面数据。

代码

  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <meta name="format-detection" content="telephone=no">
  10.     <title>文章列表</title>
  11.     <link href="css/style.css" rel="stylesheet" />
  12.     <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
  13.     <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
  14.     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
  15.     <script type="text/javascript">
  16.     function rows(np){
  17.         $.ajax({
  18.             url : '../article/rows',
  19.             type : 'POST',
  20.             dataType : 'json',
  21.             /* data : params, */
  22.             success : function(data) {
  23.                 var pageCount = data%5 == 0 ? data/5 : (data/5+1);
  24.                 var codePage = "";
  25.                 for (var j=np-2; j<=np+2; j++) {
  26.                     if(j > pageCount && j > 0){
  27.                         codePage += 
  28.                             "<li><a id='"+(j-5)+"' onclick='pages("+(j-5)+");rows("+(j-5)+");'>"+(j-5)+"</a></li>";
  29.                     }
  30.                 }
  31.                 for (var j=np-2; j<=np+2; j++) {
  32.                     if(j >= 1 && j <= pageCount) {
  33.                         codePage += 
  34.                             "<li><a id='"+j+"' onclick='pages("+j+");rows("+j+");'>"+j+"</a></li>";
  35.                     }
  36.                 }
  37.                 for (var j=np-2; j<=np+2; j++) {
  38.                     if(j < 1 && j <= pageCount){
  39.                         codePage += 
  40.                             "<li><a id='"+(j+5)+"' onclick='pages("+(j+5)+");rows("+(j+5)+");'>"+(j+5)+"</a></li>";
  41.                     }
  42.                 }
  43.                 
  44.                 $("#page-size").html(codePage); 
  45.             },
  46.             error : function() {
  47.                 alert("rows出错了！");
  48.             }
  49.         });
  50.     }
  51.     
  52.     function pages(p){
  53.         $.ajax({
  54.             url : '../article/page',
  55.             type : 'POST',
  56.             dataType : 'json',
  57.             data : {"pageNow":p},
  58.             success : function(data) {
  59.                 var code = "";
  60.                 for (var i=0; i<data.length; i++) {
  61.                 code += 
  62.                     "<div>\r\n" + 
  63.                     "<h2>\r\n" + 
  64.                     "    <a href='articleDetail.html?aid="+data[i].articleId+"'>"+data[i].articleTitle+"</a>\r\n" + 
  65.                     "</h2>\r\n" + 
  66.                     "<h5>\r\n" + 
  67.                     "    <span class=\"glyphicon glyphicon-calendar\" aria-hidden=\"true\">"+data[i].nowDate+"</span>&nbsp;&nbsp;\r\n" + 
  68.                     "    <span class=\"glyphicon glyphicon-user\" aria-hidden=\"true\">"+data[i].user.userName+"</span>\r\n" + 
  69.                     "</h5>\r\n" + 
  70.                     "<p>"+data[i].articleSummary+"</p>\r\n" + 
  71.                     "<a href='articleDetail.html?aid="+data[i].articleId+"'>\r\n" + 
  72.                     "    <strong>More</strong>\r\n" + 
  73.                     "    <span class=\"glyphicon glyphicon-menu-right\" aria-hidden=\"true\"></span>\r\n" + 
  74.                     "</a>\r\n" + 
  75.                     "<hr />\r\n" + 
  76.                     "</div>";
  77.                 }
  78.                 $("#tableBody").html(code);
  79.             },
  80.             error : function() {
  81.                 alert("page出错了！");
  82.             }
  83.         });
  84.     }
  85.     
  86.     $(document).ready(function () {
  87.         rows(1);
  88.         pages(1);
  89.     });
  90.     
  91.     </script>
  92. </head>
  93.  
  94. <body>
  95.     <nav class="navbar navbar-inverse" role="navigation">
  96.         <div class="container-fluid">
  97.             <div class="navbar-header">
  98.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
  99.                     <span class="sr-only">切换导航</span>
  100.                     <span class="icon-bar"></span>
  101.                     <span class="icon-bar"></span>
  102.                     <span class="icon-bar"></span>
  103.                 </button>
  104.                 <a class="navbar-brand" href="#">动态</a>
  105.             </div>
  106.             <div class="collapse navbar-collapse" id="example-navbar-collapse">
  107.                 <ul class="nav navbar-nav navbar-right">
  108.                     <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
  109.                     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
  110.                 </ul>
  111.                 <ul class="nav navbar-nav">
  112.                     <li class="active"><a href="#">首页</a></li>
  113.                     <li><a href="#">动态</a></li>
  114.                     <li class="dropdown">
  115.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  116.                             管理 <b class="caret"></b>
  117.                         </a>
  118.                         <ul class="dropdown-menu">
  119.                             <li><a href="#">文章</a></li>
  120.                             <li><a href="#">评论</a></li>
  121.                         </ul>
  122.                     </li>
  123.                 </ul>
  124.             </div>
  125.         </div>
  126.     </nav>
  127.     <div class="container">
  128.         <div class="row">
  129.  
  130.  
  131.             <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
  132.  
  133.                 <div class="list-group" id="tableBody">
  134.  
  135.                     <div>
  136.                         <h2>
  137.                             <a href="#">在教室内活动应注意安全</a>
  138.                         </h2>
  139.                         <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span>
  140.                             <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span>
  141.                         </h5>
  142.                         <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
  143.                             1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
  144.                             2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
  145.                             3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
  146.                             4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
  147.                         </p>
  148.                         <a href="#">
  149.                             <strong>More</strong>
  150.                             <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
  151.                         </a>
  152.                         <hr />
  153.                     </div>
  154.                     <div>
  155.                         <h2>
  156.                             <a href="#">在教室内活动应注意安全</a>
  157.                         </h2>
  158.                         <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span>
  159.                             <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span>
  160.                         </h5>
  161.                         <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
  162.                             1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
  163.                             2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
  164.                             3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
  165.                             4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
  166.                         </p>
  167.                         <a href="#">
  168.                             <strong>More</strong>
  169.                             <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
  170.                         </a>
  171.                         <hr />
  172.                     </div>
  173.  
  174.                 </div>
  175.                 <nav aria-label="Page navigation" class="text-center">
  176.                     <ul class="pagination pagination-lg" id="page-size">
  177.                         <li><a href="#">首页</a></li>
  178.                         <li><a href="#">&laquo;上一页</a></li>
  179.                         <li><a href="#">1</a></li>
  180.                         <li><a href="#">2</a></li>
  181.                         <li><a href="#">3</a></li>
  182.                         <li><a href="#">4</a></li>
  183.                         <li><a href="#">5</a></li>
  184.                         <li><a href="#">下一页&raquo;</a></li>
  185.                         <li><a href="#">尾页</a></li>
  186.                     </ul>
  187.                 </nav>
  188.             </div>
  189.         </div>
  190.     </div>
  191.     <nav class="navbar navbar-default" role="navigation">
  192.         <div class="container-fluid">
  193.             <ul class="nav navbar-nav navbar-right">
  194.                 <li><a href="#">Copyright &copy; 2019 &nbsp; 朱学良 &nbsp; 蒙ICP备15101216号-1 &nbsp;</a></li>
  195.             </ul>
  196.         </div>
  197.     </nav>
  198. </body>
  199.  
  200. </html>

后台：处理数据（SSM框架写的，看吧）

  1. package com.securty.imut.controller;
  5. import java.io.File;
  6. import java.io.IOException;
  7. import java.io.InputStream;
  8. import java.sql.Timestamp;
  9. import java.util.List;
  11. import javax.servlet.http.HttpServletRequest;
  13. import org.apache.commons.io.FileUtils;
  14. import org.apache.log4j.helpers.LogLog;
  15. import org.springframework.beans.factory.annotation.Autowired;
  16. import org.springframework.stereotype.Controller;
  17. import org.springframework.web.bind.annotation.RequestMapping;
  18. import org.springframework.web.bind.annotation.RequestMethod;
  19. import org.springframework.web.bind.annotation.RequestParam;
  20. import org.springframework.web.bind.annotation.ResponseBody;
  21. import org.springframework.web.multipart.MultipartFile;
  23. import com.securty.imut.bean.Article;
  24. import com.securty.imut.service.ArticleService;
  25. import com.securty.imut.util.WangEditor;
  27.  
  28. @Controller
  29. @RequestMapping(value="/article")
  30. public class ArticleController {
  31.  
  32.     @Autowired
  33.     private ArticleService articleService;
  34.     
  35.     /**
  36.      * 查找所有
  37.      * @return
  38.      */
  39.     @RequestMapping(value="/list")
  40.     @ResponseBody
  41.     public List<Article> list(){
  42.         List<Article> list = articleService.findAll();
  43.         return list;
  44.     }
  45.     
  46.     /**
  47.      * 查找
  48.      * @return
  49.      */
  50.     @RequestMapping(value="/page")
  51.     @ResponseBody
  52.     public List<Article> page(HttpServletRequest request){
  53.         Article article = new Article();
  54.         Timestamp nowDate = new Timestamp(System.currentTimeMillis());
  55.         article.setNowDate(nowDate);
  56.         String pn = request.getParameter("pageNow") == null ? String.valueOf(1) : request.getParameter("pageNow");
  57.         int pageNow = Integer.parseInt(pn);
  58.         int pageSize = 5;
  59.         int startRows = pageSize*(pageNow-1);
  60.         List<Article> list = articleService.queryPage(startRows);
  61.         return list;
  62.     }
  63.     
  64.     /**
  65.      * 查找
  66.      * @return
  67.      */
  68.     @RequestMapping(value="/rows")
  69.     @ResponseBody
  70.     public int rows(HttpServletRequest request){
  71.         return articleService.getRowCount();
  72.     }
  73.     
  74.     @RequestMapping(value="/add")
  75.     @ResponseBody
  76.     public int add(Article article){
  77.         return articleService.addArticle(article);
  78.     }
  79.     
  80.     @RequestMapping(value="/update")
  81.     @ResponseBody
  82.     public int update(Article article){
  83.         return articleService.updateArticleById(article);
  84.     }
  85.     
  86.     @RequestMapping(value="/read")
  87.     @ResponseBody
  88.     public Article read(Article article){
  89.         return articleService.selectArticlesById(article);
  90.     }
  91.     
  92.     @RequestMapping(value="/delete")
  93.     @ResponseBody
  94.     public int delete(Integer aid){
  95.         return articleService.deleteArticleById(aid);
  96.     }
  97.     
  98.     @RequestMapping(value = "/upload",method=RequestMethod.POST)
  99.     @ResponseBody
  100.     public WangEditor uploadFile(
  101.             @RequestParam("myFile") MultipartFile multipartFile,
  102.             HttpServletRequest request) {
  103.  
  104.         try {
  105.             // 获取项目路径
  106.             String realPath = request.getSession().getServletContext()
  107.                     .getRealPath("");
  108.             InputStream inputStream = multipartFile.getInputStream();
  109.             String contextPath = request.getContextPath();
  110.             // 服务器根目录的路径
  111.             String path = realPath.replace(contextPath.substring(1), "");
  112.             // 根目录下新建文件夹upload，存放上传图片
  113.             String uploadPath = path + "upload";
  114.             // 获取文件名称
  115.             String filename = multipartFile.getOriginalFilename();
  116.             // 将文件上传的服务器根目录下的upload文件夹
  117.             File file = new File(uploadPath, filename);
  118.             FileUtils.copyInputStreamToFile(inputStream, file);
  119.             // 返回图片访问路径
  120.             String url = request.getScheme() + "://" + request.getServerName()
  121.                     + ":" + request.getServerPort() + "/upload/" + filename;
  122.             
  123.             String [] str = {url};
  124.             WangEditor we = new WangEditor(str);
  125.             return we;
  126.         } catch (IOException e) {
  127.             LogLog.error("上传文件失败", e);
  128.         }
  129.         return null;
  130.  
  131.     }
  132. }

效果

参考地址

https://github.com/Aizhuxueliang/security   

原文链接：http://www.cnblogs.com/nqdxt/p/11352881.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号