效果：

前臺分頁

區別於後臺分頁的將第幾頁和共多少條傳到後臺，再從後臺從資料庫查詢出當前頁應該顯示的資料返回

前臺分頁是將所有的資料都查出存到前臺，在經過用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)