前台分页，以及类别选择

Posted 2020-10-18 谁将新樽辞旧月，今月曾经照古人

效果：

前台分页

区别于后台分页的将第几页和共多少条传到后台，再从后台从数据库查询出当前页应该显示的数据返回

前台分页是将所有的数据都查出存到前台，在经过用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: centerwoocommerce产品类别短代码分页不起作用

 java 数据放在了list中，如何实现前台分页
 Pagination(分页) 从前台到后端总结
 用于 WordPress 的 PHP 片段，用于获取所有产品子类别
 使用纯js写的一个分页
 Ajax分页插件Pagination从前台jQuery到后端java总结