paginate

页面分页功能实现

最新推荐文章于 2024-09-10 09:13:37 发布

转载最新推荐文章于 2024-09-10 09:13:37 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zjpzjp/p/7575782.html

本文介绍了一种基于JavaScript的页面分页功能实现方法，通过检测数据总量和每页显示数量来动态调整分页显示状态，并使用CSS进行样式设定。

<div style="position:relative;margin:10px 0px;">
                           <div style="box-sizing:border-box;overflow: hidden;float:right;">
                            <div id="mainBusisPage"></div>
                        </div>
                        <div id="fourPage" style="box-sizing:border-box;overflow: hidden;float:right;">
                            <div class="pagegg"><span id="mainBusisTotalNuber" class="few">总条数： <em class="pageNum"></em></span><span id="mainBusisTotalPage" class="few">总页数：  <em class="pageNum"></em></span></div>
                        </div>
                    </div>

#mainBusisPage{
    box-sizing: border-box;
    display:none;
    
    margin-right: 66px;

function mainBusisPaginate(totalCount, pageSize) {
    
    if(totalCount==0) {
        var table = $('#mainBusisTable').DataTable( {
            "destroy":true,
              "retrieve":true

        } );

    }

    if($("#mainBusisPage").children().length > 0) {
        return true;
    }
    var pageCount = 1;
    var displayPageSize = pageSize;
    
    if(totalCount==0){
        $("#mainBusisPage").css("display","none");
    }
    if(totalCount>=1&&totalCount<=pageSize){
        $("#mainBusisPage").css("display","block");
        displayPageSize = 1;
    }
    if(totalCount> pageSize){
        $("#mainBusisPage").css("display","block");
        pageCount=Math.ceil(totalCount/pageSize);
        if(pageCount < pageSize) {
            displayPageSize = pageCount;
        }
    }
    $("#mainBusisPage").paginate({
        count:pageCount,
        start:1,
        display: displayPageSize,
        border: true,
        border_color: "#00c1de",
        text_color: "#000",
        background_color: "#fff",
        border_hover_color: "#00c1de",
        text_hover_color: "#fff",//设置鼠标滑向页码时页码的颜色。
        background_hover_color: "#00c1de",//设置鼠标滑向页码时页码背景的颜色。
        images: false,
        mouse: 'slide',
        onChange: function(current){
            

            //dosomething
        }
    }) ;
}