纯手写实现ajax分页功能
前言
最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用bootstrap做样式，分页功能用ajax实现，没用其他插件哦，只引入引这些：
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script> <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方法负责加载页面数据。
代码
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>文章列表</title> <link href="css/style.css" rel="stylesheet" /> <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript"> function rows(np){ $.ajax({ url : '../article/rows', type : 'POST', dataType : 'json', /* data : params, */ success : function(data) { var pageCount = data%5 == 0 ? data/5 : (data/5+1); var codePage = ""; for (var j=np-2; j<=np+2; j++) { if(j > pageCount && j > 0){ codePage += "<li><a id='"+(j-5)+"' onclick='pages("+(j-5)+");rows("+(j-5)+");'>"+(j-5)+"</a></li>"; } } for (var j=np-2; j<=np+2; j++) { if(j >= 1 && j <= pageCount) { codePage += "<li><a id='"+j+"' onclick='pages("+j+");rows("+j+");'>"+j+"</a></li>"; } } for (var j=np-2; j<=np+2; j++) { if(j < 1 && j <= pageCount){ codePage += "<li><a id='"+(j+5)+"' onclick='pages("+(j+5)+");rows("+(j+5)+");'>"+(j+5)+"</a></li>"; } } $("#page-size").html(codePage); }, error : function() { alert("rows出错了！"); } }); } function pages(p){ $.ajax({ url : '../article/page', type : 'POST', dataType : 'json', data : {"pageNow":p}, success : function(data) { var code = ""; for (var i=0; i<data.length; i++) { code += "<div>\r\n" + "<h2>\r\n" + " <a href='articleDetail.html?aid="+data[i].articleId+"'>"+data[i].articleTitle+"</a>\r\n" + "</h2>\r\n" + "<h5>\r\n" + " <span class=\"glyphicon glyphicon-calendar\" aria-hidden=\"true\">"+data[i].nowDate+"</span> \r\n" + " <span class=\"glyphicon glyphicon-user\" aria-hidden=\"true\">"+data[i].user.userName+"</span>\r\n" + "</h5>\r\n" + "<p>"+data[i].articleSummary+"</p>\r\n" + "<a href='articleDetail.html?aid="+data[i].articleId+"'>\r\n" + " <strong>More</strong>\r\n" + " <span class=\"glyphicon glyphicon-menu-right\" aria-hidden=\"true\"></span>\r\n" + "</a>\r\n" + "<hr />\r\n" + "</div>"; } $("#tableBody").html(code); }, error : function() { alert("page出错了！"); } }); } $(document).ready(function () { rows(1); pages(1); }); </script> </head> <body> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">动态</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> </ul> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">动态</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 管理 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">文章</a></li> <li><a href="#">评论</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1"> <div class="list-group" id="tableBody"> <div> <h2> <a href="#">在教室内活动应注意安全</a> </h2> <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span> <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span> </h5> <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点： 1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。 2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。 3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。 4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。 </p> <a href="#"> <strong>More</strong> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> </a> <hr /> </div> <div> <h2> <a href="#">在教室内活动应注意安全</a> </h2> <h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10</span> <span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redis</span> </h5> <p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点： 1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。 2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。 3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。 4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。 </p> <a href="#"> <strong>More</strong> <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> </a> <hr /> </div> </div> <nav aria-label="Page navigation" class="text-center"> <ul class="pagination pagination-lg" id="page-size"> <li><a href="#">首页</a></li> <li><a href="#">«上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">下一页»</a></li> <li><a href="#">尾页</a></li> </ul> </nav> </div> </div> </div> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Copyright © 2019 朱学良 蒙ICP备15101216号-1 </a></li> </ul> </div> </nav> </body> </html>
后台：处理数据（SSM框架写的，看吧）
package com.securty.imut.controller; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.sql.Timestamp; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.commons.io.FileUtils; import org.apache.log4j.helpers.LogLog; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.securty.imut.bean.Article; import com.securty.imut.service.ArticleService; import com.securty.imut.util.WangEditor; @Controller @RequestMapping(value="/article") public class ArticleController { @Autowired private ArticleService articleService; /** * 查找所有 * @return */ @RequestMapping(value="/list") @ResponseBody public List<Article> list(){ List<Article> list = articleService.findAll(); return list; } /** * 查找 * @return */ @RequestMapping(value="/page") @ResponseBody public List<Article> page(HttpServletRequest request){ Article article = new Article(); Timestamp nowDate = new Timestamp(System.currentTimeMillis()); article.setNowDate(nowDate); String pn = request.getParameter("pageNow") == null ? String.valueOf(1) : request.getParameter("pageNow"); int pageNow = Integer.parseInt(pn); int pageSize = 5; int startRows = pageSize*(pageNow-1); List<Article> list = articleService.queryPage(startRows); return list; } /** * 查找 * @return */ @RequestMapping(value="/rows") @ResponseBody public int rows(HttpServletRequest request){ return articleService.getRowCount(); } @RequestMapping(value="/add") @ResponseBody public int add(Article article){ return articleService.addArticle(article); } @RequestMapping(value="/update") @ResponseBody public int update(Article article){ return articleService.updateArticleById(article); } @RequestMapping(value="/read") @ResponseBody public Article read(Article article){ return articleService.selectArticlesById(article); } @RequestMapping(value="/delete") @ResponseBody public int delete(Integer aid){ return articleService.deleteArticleById(aid); } @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBody public WangEditor uploadFile( @RequestParam("myFile") MultipartFile multipartFile, HttpServletRequest request) { try { // 获取项目路径 String realPath = request.getSession().getServletContext() .getRealPath(""); InputStream inputStream = multipartFile.getInputStream(); String contextPath = request.getContextPath(); // 服务器根目录的路径 String path = realPath.replace(contextPath.substring(1), ""); // 根目录下新建文件夹upload，存放上传图片 String uploadPath = path + "upload"; // 获取文件名称 String filename = multipartFile.getOriginalFilename(); // 将文件上传的服务器根目录下的upload文件夹 File file = new File(uploadPath, filename); FileUtils.copyInputStreamToFile(inputStream, file); // 返回图片访问路径 String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/" + filename; String [] str = {url}; WangEditor we = new WangEditor(str); return we; } catch (IOException e) { LogLog.error("上传文件失败", e); } return null; } }
效果
