前台分页，以及类别选择
效果：
前台分页
区别于后台分页的将第几页和共多少条传到后台，再从后台从数据库查询出当前页应该显示的数据返回
前台分页是将所有的数据都查出存到前台，在经过用js进行判断，分页，显示
HTML代码：
<div class="pageBox1" class="independent-bottom-right" style="width: 910px;">
<ul class="pageDiv clearfix">
</ul>
<div class="notContent hide">
无数据
</div>
<div class="page">
<ul class="pageMenu clearfix">
<li class="firstPage">首页</li>
<li class="prevPage"> < </li>
<div class="pageObj clearfix">
</div>
<li class="nextPage"> > </li>
<li class="lastPage">尾页</li>
<li class="last" style="font-size: 14px;">
共<span class="totalPage"></span>页，跳转至 <input type="number" class="keuInput" value="1">
<button type="button" class="btnSure">确定</button>
</li>
</ul>
</div>分页所需样式：
ul,li{margin: 0;padding: 0;list-style: none;}
.pageMenu li::selection{background:transparent;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display: block;clear: both;}
.pageBox{width:800px;background: #eee;border:1px solid #ebebeb;padding: 10px;margin: 0 auto;}
.pageDiv{width: 98.75%;background: #fff;padding-left: 1.25%;margin-bottom: 10px;}
.pageDiv li{margin-bottom: 10px;border:1px solid #dbdbdb;width: 21.5%;margin-right: 1.25%;float:left;margin-top: 10px;padding: 1%;text-align: center;}
.hide{display: none;}
.notContent{padding: 15px 0;text-align: center;}
.page{text-align: center;width: 100%;margin: 0 auto;}
.pageMenu{display: inline-block;position: relative;left: 20%;}
.pageMenu li{border: solid thin #ddd;margin: 3px;float: left;padding: 5px 10px;cursor: pointer;background: #fff;}
.pageMenu li.firstPage{}
.pageMenu li.prevPage{}
.pageMenu li.pageNum{}
.pageMenu li.nextPage{}
.pageMenu li.lastPage{}
.pageMenu li.disabled{ background-color: #DDDDDD; cursor: not-allowed;}
.pageMenu li.active{ border: solid thin #0099FF;background-color: #0099FF;color: white;}
.pageMenu li.last{background: transparent;border:0;position: relative;top: -4px;}
.page .keuInput{padding: 0 5px;width: 30px;border: solid thin #ddd;height: 29px;outline: none;text-align: center;font-size: 16px;}
.page .btnSure{padding: 4px 8px;border: solid thin #ddd;outline: none;text-align: center;font-size: 16px;background: #fff;position: relative;top: 2px;}
.page .btnSure:hover{cursor: pointer;}
.pageObj{float: left;}jquery控制分页代码：
<script>
$(function(){
var typeid=<%=request.getParameter("id") %>;
var str='';
if(typeid!=null){
str='?typeid='+typeid;
}
$(".pageBox1").pageFun({ /*在本地服务器上才能访问哦*/
interFace:"<%=basePath%>/teach/course/listclassajax"+str, /*接口*/
//interFace:{${classlist}},
displayCount:6, /*每页显示总条数*/
maxPage:5,/*每次最多加载多少页*/
dataFun:function(data){
console.log(data);
var dataHtml = "<div class='independent-PracticeCourse-contentli'>"+
"<div class='independent-PracticeCourse-contentli-content'>"+
"<div class='independent-PracticeCourse-contentli-top'>"+
"<a href='<%=basePath%>/teach/course/classdetails?id="+data.id+"' ><img src='${server }"+data.img+"' width='306' height='192' alt='' /></a>"+
"</div>"+
"<div class='independent-PracticeCourse-contentli-bottom'>"+
"<div class='independent-PracticeCourse-contentli-bottom-top'>"+
"<a href='<%=basePath%>/teach/course/classdetails?id="+data.id+"}'>"+
data.name+"</a>"+
"</div>"+
"<div class='independent-PracticeCourse-contentli-bottom-bottom' style='text-align: left;'>"+
"<div class='img-practice'> </div>"+
"<div class='name-practice'>主讲人："+data.teacher.nickName+"</div>";
if(data.free==='免费'){
dataHtml+="<div class='type-practice'>"+data.free+"</div>";
}else if(data.free==='收费'){
dataHtml+="<div class='type-practice1'>"+data.free+"</div>";
}
dataHtml+="</div>"+
"<div class='independent-PracticeCourse-contentli-bottom-bottom'>"+
"<div class='independent-PracticeCourse-contentli-bottom-time'></div>"+
"</div>"+
"</div>"+
"</div>";
return dataHtml;
},
pageFun:function(i){
var pageHtml = '<li class="pageNum">'+i+'</li>';
return pageHtml;
}
})
})
</script>最前面是判断是否有类别id传过来，如果有就根据传过来的类别id进行查询，如果没有就查询所有。
后台controller代码：
/**
* 返回课程
* @param page
* @param limit
* @param name
* @return
*/
@RequestMapping("/listclassajax")
@ResponseBody
public JSONObject listclassajax(Integer typeid) {
JSONObject jo = new JSONObject();
Map<String,Object> result=classservice.listclassbytype(typeid);
jo.put("status", "ok");
jo.put("message", "success");
jo.put("datas", result.get("data"));
return jo;
}这里需要注意的是，这里返回的数据，因为引入js文件的要求，需要以以上格式返回，其中 datas 是返回的内容集合。
完成了分页之后还有一个问题，如何根据在左边显示数据库中的类别信息，然后根据类别信息显示数据。
显示类别信息的HTML代码：
<div class="independent-banner-top-left-image">
<img src="%E8%AF%BE%E7%A8%8B_files/both-image.png" alt="" width="35"
height="35">
</div>
<div class="independent-banner-top-left-bothwrite">全部课程</div>js从数据库获取类别信息并追加到页面：
<script type="text/javascript">
function type1() {
$.ajax({
type : "post",
url : '<%=basePath%>/teach/course/listtype1?q=1',
dataType : "json",
sync : "false",
success : function(data) {
for (var a = 0; a < data.length; a++) {
$("#typediv").append("<div class='independent-bottom-left-li-writemore-li'><a href='<%=basePath%>/teach/course/classlookpage?id="+data[a].id+"' >"+ data[a].name+ "</a></div>");
}
},
error : function() {
}
});
}
</script>这里再追加类别信息到页面的时候，追加的是 超链接 ，然后在超链接的链接中写的就是当前页面的链接，然后加上当前类型的id，在分页之前就判断是否传过来id，如果有就根据id查询，如果没有就直接查询所有。
完整页面：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page
import="org.springframework.security.core.context.SecurityContextHolder"%>
<%@ page import="com.wazn.learn.configure.security.CustomerUser"%>
<%
String basePath = request.getContextPath();
CustomerUser user = (CustomerUser) SecurityContextHolder.getContext().getAuthentication().getPrincipal();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>课程预览</title>
<style type="text/css">
.layui-btn {
margin: 8px 16px
}
.layui-input {
width: 200px;
margin: 8px
}
.layui-form-label {
width: 180px;
font-size: 16px;
margin: 8px
}
#searchtable {
margin: 20px;
padding: 10px;
}
#searchtable td {
width: 100px;
height: 30px;
font-size: 16px;
textalign: center;
border: 1px solid black;
padding: 5px
}
.layui-form-checkbox {
margin-top: 10px
}
</style>
<link rel="stylesheet" href="<%=basePath%>/res/css/style.css" media="all">
<script type="text/javascript" src="<%=basePath%>/res/js/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>/res/layui/css/layui.css" media="all">
<script src="<%=basePath%>/res/layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath%>/res/js/page.js"></script>
</head>
<style type="text/css">
li {
float: left;
}
.independent-PracticeCourse-contentli-content:hover {
box-shadow: 0 0 10px #666666;
cursor: pointer;
}
.listdiv {
width: 200px;
height: 300px;
}
.type-practice1 {
width: 45px;
height: 17px;
line-height: 16px;
text-align: center;
float: left;
color: #666;
font-size: 12px;
border: 1px solid #5ab62d;
color: #5ab62d;
color: #e02d2d;
border: 1px solid #e02d2d;
}
.layui-input {
width: 60%;
}
.layui-select {
width: 60%;
}
.independent-PracticeCourse-contentli{
margin-left: 25px;
}
ul,li{margin: 0;padding: 0;list-style: none;}
.pageMenu li::selection{background:transparent;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display: block;clear: both;}
.pageBox{width:800px;background: #eee;border:1px solid #ebebeb;padding: 10px;margin: 0 auto;}
.pageDiv{width: 98.75%;background: #fff;padding-left: 1.25%;margin-bottom: 10px;}
.pageDiv li{margin-bottom: 10px;border:1px solid #dbdbdb;width: 21.5%;margin-right: 1.25%;float:left;margin-top: 10px;padding: 1%;text-align: center;}
.hide{display: none;}
.notContent{padding: 15px 0;text-align: center;}
.page{text-align: center;width: 100%;margin: 0 auto;}
.pageMenu{display: inline-block;position: relative;left: 20%;}
.pageMenu li{border: solid thin #ddd;margin: 3px;float: left;padding: 5px 10px;cursor: pointer;background: #fff;}
.pageMenu li.firstPage{}
.pageMenu li.prevPage{}
.pageMenu li.pageNum{}
.pageMenu li.nextPage{}
.pageMenu li.lastPage{}
.pageMenu li.disabled{ background-color: #DDDDDD; cursor: not-allowed;}
.pageMenu li.active{ border: solid thin #0099FF;background-color: #0099FF;color: white;}
.pageMenu li.last{background: transparent;border:0;position: relative;top: -4px;}
.page .keuInput{padding: 0 5px;width: 30px;border: solid thin #ddd;height: 29px;outline: none;text-align: center;font-size: 16px;}
.page .btnSure{padding: 4px 8px;border: solid thin #ddd;outline: none;text-align: center;font-size: 16px;background: #fff;position: relative;top: 2px;}
.page .btnSure:hover{cursor: pointer;}
.pageObj{float: left;}
</style>
<body onload="type1();">
<div class="independent-banner-top">
<div class="independent-banner-top-left">
<div class="independent-banner-top-left-image">
<img src="%E8%AF%BE%E7%A8%8B_files/both-image.png" alt="" width="35"
height="35">
</div>
<div class="independent-banner-top-left-bothwrite">全部课程</div>
</div>
<div class="independent-child">
</div>
<div class="independent-banner-top-ul">
<div class="independent-banner-top-left-bothwrite" style="float: right;"><a>查看更多>></a></div>
</div>
</div>
<div class="independent-both">
<!--左侧开始-->
<div class="independent-bottom-left">
<div class="independent-bottom-left-li" style="padding-top: 5px;">
<div class="independent-bottom-left-li-write">课程类型</div>
<div class="independent-bottom-left-li-writemore" id="typediv">
</div>
<div class="independent-bottom-left-li-writemore-li">
<a href="<%=basePath%>/teach/course/classlookpage">全部课程</a>
</div>
<div class="independent-bottom-left-li-writemore">
</div>
</div>
</div>
<div class="independent-bottom-right" style="width: 910px;">
<div style="width: 100%; height: 100%">
</div>
<div class="pageBox1" class="independent-bottom-right" style="width: 910px;">
<ul class="pageDiv clearfix">
</ul>
<div class="notContent hide">
无数据
</div>
<div class="page">
<ul class="pageMenu clearfix">
<li class="firstPage">首页</li>
<li class="prevPage"> < </li>
<div class="pageObj clearfix">
</div>
<li class="nextPage"> > </li>
<li class="lastPage">尾页</li>
<li class="last" style="font-size: 14px;">
共<span class="totalPage"></span>页，跳转至 <input type="number" class="keuInput" value="1">
<button type="button" class="btnSure">确定</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){
var typeid=<%=request.getParameter("id") %>;
var str='';
if(typeid!=null){
str='?typeid='+typeid;
}
$(".pageBox1").pageFun({ /*在本地服务器上才能访问哦*/
interFace:"<%=basePath%>/teach/course/listclassajax"+str, /*接口*/
//interFace:{${classlist}},
displayCount:6, /*每页显示总条数*/
maxPage:5,/*每次最多加载多少页*/
dataFun:function(data){
console.log(data);
var dataHtml = "<div class='independent-PracticeCourse-contentli'>"+
"<div class='independent-PracticeCourse-contentli-content'>"+
"<div class='independent-PracticeCourse-contentli-top'>"+
"<a href='<%=basePath%>/teach/course/classdetails?id="+data.id+"' ><img src='${server }"+data.img+"' width='306' height='192' alt='' /></a>"+
"</div>"+
"<div class='independent-PracticeCourse-contentli-bottom'>"+
"<div class='independent-PracticeCourse-contentli-bottom-top'>"+
"<a href='<%=basePath%>/teach/course/classdetails?id="+data.id+"}'>"+
data.name+"</a>"+
"</div>"+
"<div class='independent-PracticeCourse-contentli-bottom-bottom' style='text-align: left;'>"+
"<div class='img-practice'> </div>"+
"<div class='name-practice'>主讲人："+data.teacher.nickName+"</div>";
if(data.free==='免费'){
dataHtml+="<div class='type-practice'>"+data.free+"</div>";
}else if(data.free==='收费'){
dataHtml+="<div class='type-practice1'>"+data.free+"</div>";
}
dataHtml+="</div>"+
"<div class='independent-PracticeCourse-contentli-bottom-bottom'>"+
"<div class='independent-PracticeCourse-contentli-bottom-time'></div>"+
"</div>"+
"</div>"+
"</div>";
return dataHtml;
},
pageFun:function(i){
var pageHtml = '<li class="pageNum">'+i+'</li>';
return pageHtml;
}
})
})
</script>
<script type="text/javascript">
function type1() {
$.ajax({
type : "post",
url : '<%=basePath%>/teach/course/listtype1?q=1',
dataType : "json",
sync : "false",
success : function(data) {
for (var a = 0; a < data.length; a++) {
$("#typediv").append("<div class='independent-bottom-left-li-writemore-li'><a href='<%=basePath%>/teach/course/classlookpage?id="+data[a].id+"' >"+ data[a].name+ "</a></div>");
}
},
error : function() {
}
});
}
</script>
</html>这是需要引入的js文件：
;(function($,win,doc,unde){
$.fn.pageFun = function(options){
var that = $(this);
var defaults = {
pageDiv : $(this).find(".pageDiv"),
pageDivLi : $(this).find(".pageDiv li"),
page : $(this).find(".page"),
pageMenu : $(this).find(".pageMenu"),
pageMenuLi: $(this).find(".pageDiv li"),
firstPage : $(this).find(".firstPage"),
prevPage : $(this).find(".prevPage"),
pageNum : $(this).find(".pageNum"),
nextPage : $(this).find(".nextPage"),
pageObj : $(this).find(".pageObj"),
pageObjLi : $(this).find(".pageObj li"),
lastPage : $(this).find(".lastPage"),
keuInput : $(this).find(".keuInput"),
btnSure : $(this).find(".btnSure"),
notContent: $(this).find(".notContent"),
totalPage : $(this).find(".totalPage"),
pNum : 1,
lastNum : 0,
cacheNum : 1,
min : 0,
res :null
};
var opts = $.extend({},defaults,options);
var Method = {
init : function(){
Method.getData(); /*请求接口获得数据*/
Method.handleEvent(); /*事件处理*/
},
getData : function(){
$.getJSON(opts.interFace,function(data){
if(data.status == "ok"){
opts.res = data.datas;
if((opts.res.length <= opts.displayCount)&&(opts.res.length > 0)){
opts.displayCount = opts.res.length;
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
opts.firstPage.off("click");
opts.lastPage.off("click");
opts.prevPage.off("click");
opts.nextPage.off("click");
}else if(opts.res.length == 0){
opts.notContent.removeClass("hide");
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
opts.firstPage.off("click");
opts.lastPage.off("click");
opts.prevPage.off("click");
opts.nextPage.off("click");
return;
}
else{
opts.pNum = Math.ceil(opts.res.length / opts.displayCount);
}
opts.notContent.addClass("hide");
for (var i = 0; i < opts.displayCount; i++) {
opts.pageDiv.append(opts.dataFun(opts.res[i]));
}
for (var i = 0; i < opts.pNum; i++) {
opts.pageObj.append(opts.pageFun(i+1));
}
var centerLeft = -(opts.pageMenu.outerWidth(true)/2)+"px"
opts.pageMenu.css({marginLeft:centerLeft})
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.pageObj.find("li:first-child").addClass("active");
opts.totalPage.text(opts.pNum);
Method.showPageindex(0, opts.maxPage, 0);
}
else{
}
});
},
handleEvent : function(){
opts.pageObj.on("click","li",function(){ /*点击页码切换*/
$(this).addClass("active");
opts.pageDiv.empty();
$(this).siblings("li").removeClass("active");
opts.cacheNum = $(this).text();
if($(this).text() == 1){
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
if (opts.pNum == 1) {
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
Method.xhhtml($(this).text(),opts.res.length);
return ;
};
}else if($(this).text() == opts.pNum){
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
if(opts.res.length<(opts.displayCount*opts.pNum)){
Method.xhhtml($(this).text(),opts.res.length);
return
}
}else{
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
}
Method.showPageindex(0, opts.maxPage, $(this).text());
Method.xhhtml($(this).text(),$(this).text()*opts.displayCount);
});
opts.prevPage.on("click",function(){ /*点击上页*/
if(opts.cacheNum == 1){
return;
}
if(opts.cacheNum == 2){
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
}
opts.pageDiv.empty();
opts.cacheNum--
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
that.find(".pageObj li").eq(opts.cacheNum-1).addClass("active");
that.find(".pageObj li").eq(opts.cacheNum-1).siblings("li").removeClass("active");
Method.xhhtml(opts.cacheNum,opts.cacheNum*opts.displayCount);
Method.showPageindex(0, opts.maxPage, opts.cacheNum);
});
opts.nextPage.on("click",function(){ /*点击下页*/
if(opts.cacheNum == opts.pNum){
return;
}
opts.pageDiv.empty();
opts.cacheNum++
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
that.find(".pageObj li").eq(opts.cacheNum-1).addClass("active");
that.find(".pageObj li").eq(opts.cacheNum-1).siblings("li").removeClass("active");
if(opts.cacheNum == opts.pNum){
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
Method.xhhtml(opts.cacheNum,opts.res.length);
}else{
Method.xhhtml(opts.cacheNum,opts.cacheNum*opts.displayCount);
}
Method.showPageindex(0, opts.maxPage, opts.cacheNum);
});
opts.firstPage.on("click",function(){ /*点击首页*/
opts.pageDiv.empty();
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
that.find(".pageObj li").eq(0).addClass("active");
that.find(".pageObj li").eq(0).siblings("li").removeClass("active");
Method.xhhtml(1,opts.displayCount);
opts.cacheNum = 1;
Method.showPageindex(0, opts.maxPage, 0);
});
opts.lastPage.on("click",function(){ /*点击尾页*/
opts.pageDiv.empty();
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
that.find(".pageObj li").eq(opts.pNum-1).addClass("active");
that.find(".pageObj li").eq(opts.pNum-1).siblings("li").removeClass("active");
opts.cacheNum = opts.pNum;
Method.xhhtml(opts.pNum,opts.res.length);
Method.showPageindex(0, opts.maxPage, opts.pNum);
});
opts.btnSure.on("click",function(){ /*输入页码 跳转*/
var val = opts.keuInput.val();
if((val == "")||val<=0){
opts.keuInput.val(1);
alert("请输入有效页码");
return
}
if((Number(val)>opts.pNum)){
alert('共'+opts.pNum+'页');
return
}
opts.pageDiv.empty();
that.find(".pageObj li").eq(val-1).addClass("active");
that.find(".pageObj li").eq(val-1).siblings("li").removeClass("active");
opts.cacheNum = val;
Method.showPageindex(0, opts.maxPage, val);
if(val == "1"){
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
if(opts.pNum == 1){
opts.firstPage.addClass("disabled");
opts.prevPage.addClass("disabled");
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
}
}else if(val == opts.pNum){
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
opts.lastPage.addClass("disabled");
opts.nextPage.addClass("disabled");
Method.xhhtml(val,opts.res.length);
return;
}else {
opts.firstPage.removeClass("disabled");
opts.prevPage.removeClass("disabled");
opts.lastPage.removeClass("disabled");
opts.nextPage.removeClass("disabled");
}
Method.xhhtml(val,val*opts.displayCount);
});
},
xhhtml : function(index,count){
for (var i = ((index-1)*opts.displayCount); i < count; i++) {
opts.pageDiv.append(opts.dataFun(opts.res[i]));
}
opts.keuInput.val(index);
},
showPageindex : function(min, max, index) {
if (index <= Math.ceil(max / 2)) {
min = 0;
max = max;
}
else if (opts.pNum - index < Math.ceil(max / 2)) {
min = opts.pNum - max;
max = opts.pNum ;
}
else {
console.log(min)
console.log(max)
console.log(index)
min = Math.round(index - max / 2)-1;
max = Math.round(Number(index) + Number(max / 2))-1;
console.log(min)
console.log(max)
console.log(index)
}
that.find(".pageObj li").hide();
for (var i = min; i < max; i++) {
that.find(".pageObj li").eq(i).show();
}
}
}
Method.init();
}
})(jQuery,window,document,undefined)本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-12-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读