纯手写实现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; }
}
效果
参考地址
https://github.com/Aizhuxueliang/security
纯手写实现ajax分页功能的更多相关文章
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- 纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
- 手写原生ajax
关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- SQL纯手写创建数据库到表内内容
建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...
- 纯手写SpringMVC到SpringBoot框架项目实战
引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...
- Ajax分页功能的实现
电脑换了固态硬盘,准备重装系统,因此打算把项目里一直延用的代码总结出来,防止丢失,以后也方便查阅.Ajax分页已经是非常普遍的技术了,所以也没什么需要特别说明的,直接贴代码: html部分 <! ...
随机推荐
- 【Leetcode】位1的个数
解题方案:位操作的技巧 整数 n 和 n-1(n>0) 做与运算,从其二进制形式来看,可以消掉 n 的二进制数值中最后1个 “1” .循环进行,每次消掉1个 “1” .整数 n 的二进制数值中有 ...
- Vim 命令、操作、快捷键（收藏大全）
------ 命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filenam ...
- @清晰掉 qsort()
qsort函数描述: http://www.cnblogs.com/sooner/archive/2012/04/18/2455011.html qsort()函数实现: /*** *qsort.c ...
- 【机器学习速成宝典】模型篇06决策树【ID3、C4.5、CART】（Python版）
目录 什么是决策树(Decision Tree) 特征选择 使用ID3算法生成决策树 使用C4.5算法生成决策树 使用CART算法生成决策树 预剪枝和后剪枝 应用:遇到连续与缺失值怎么办? 多变量决策 ...
- 【机器学习速成宝典】模型篇02线性回归【LR】（Python版）
目录 什么是线性回归 最小二乘法 一元线性回归 多元线性回归 什么是规范化 Python代码(sklearn库) 什么是线性回归(Linear regression) 引例 假设某地区租房价格只与房屋 ...
- __proto__ VS. prototype in JavaScript
__proto__ VS. prototype in JavaScript http://dmitrysoshnikov.com/ecmascript/javascript-the-core/#a-p ...
- java jar 服务自启动存在的坑及解决办法
为了在服务器重启的时候,java程序能够自动重启,我们通常把它加到服务里面 ln -s /full/path/to/jar /etc/init.d/service_name # start servi ...
- C# 格式化XML方法
/// <summary> /// 格式化XML方法 /// </summary> public class UXMLFormat { public static string ...
- 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_8 properties标签的使用及细节
properties 可以把数据库链接的配置放在上面的properties里面 #{占位符}的形式去引用上面的.下面的内容就是引用上面的内容的定义. 运行查询的方法测试一下 这样改造可以成功的运行程序 ...
- 基于Python对象引用、可变性和垃圾回收详解
基于Python对象引用.可变性和垃圾回收详解 下面小编就为大家带来一篇基于Python对象引用.可变性和垃圾回收详解.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. 变量不是盒子 在示例所示 ...