纯手写实现ajax分页功能
程序员文章站
2022-04-09 22:20:22
前言 最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用bootstrap做样式，分页功能用ajax实现，没用其他插件哦，只引入引这些： 简介 相关概念： ajax：异步的javascript和xml 指的是在不刷新网页的情况下 ......
前言
最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用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;
}
}
效果
参考地址
下一篇： 数据库的创建（一）