前言 最近用到了這個功能，百度大半天，網上的不是有各種問題就是需要引入其他的插件，無奈，只能自己寫，大致功能已經完成。前端頁面用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
