自定义分页

文章仅限于工作中用到作为文档记录，也可直接参考layer 的分页模式。

1、paging.js

/**
 * 分页
 * 
 * @param pagesize
 *            每页记录数
 * @param pageindex
 *            当前页数
 * @param rowcount
 *            记录总数
 * @returns
 */
var rowcount = 0;
var jumpIndex = 1;// 当前跳转的页码数
var reBind = new function() {
};

function paging(pagesize, pageindex) {
    jumpIndex = pageindex;
    reBind();
    var pagecount = parseInt(rowcount / pagesize);
    if (rowcount % pagesize > 0) {
        pagecount += 1;
    }
    if (pagecount == 0) {
        pagecount = 1;// 总页数
    }
    var begin = pagesize * (pageindex - 1);
    // content = [];

    // for (i = 0; i < pagesize; i++) {
    //
    // if ((begin + i) >= rowcount) {
    // break;
    // }
    // content.push(allData[i + begin]);
    //
    // }
    var pageHtml = "";
    // 首页
    if (pageindex == 1) {
        pageHtml += "<li  class=\"disabled\"><a href=\"javascript:void(0);\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-double-left\"></i></a></li>"
        pageHtml += "<li  class=\"disabled\"><a href=\"javascript:void(0);\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-left\"></i></a></li>"

    } else {
        pageHtml += "<li><a href=\"javascript:paging("
                + pagesize
                + ","
                + 1
                + ");\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-double-left\"></i></a></li>"
        pageHtml += "<li><a href=\"javascript:paging("
                + pagesize
                + ","
                + (pageindex - 1)
                + ");\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-left\"></i></a></li>"
    }
    var pagebegin = pageindex - 4;
    if (pagebegin <= 0) {
        pagebegin = 1;
    }
    if (pageindex > 5) {
        pageHtml += "<li><a href=\"javascript:paging("
                + pagesize
                + ","
                + 1
                + ");\">1</a></li><li><a href=\"javascript:void(0);\">...</a></li>"
    }
    var lastpage = 0;
    for (i = 0; i < 8; i++) {
        if ((i + pagebegin) > pagecount) {
            break;
        }
        if (pageindex == (i + pagebegin)) {
            pageHtml += "<li  class=\"disabled\"><a href=\"javascript:void(0);\" style=\"background-color: #f4f4f4;\">"
                    + (i + pagebegin) + "</a></li>"
        } else {
            pageHtml += "<li><a href=\"javascript:paging(" + pagesize + ","
                    + (i + pagebegin) + ");\">" + (i + pagebegin) + "</a></li>"
        }
        lastpage = i + pagebegin;
    }

    var pageend = pagecount - 3;
    if (lastpage < pagecount) {
        if (pageindex < pageend) {
            pageHtml += "<li><a href=\"javascript:void(0);\" onclick=\"javascript:void(0);\">...</a></li><li><a href=\"javascript:paging("
                    + pagesize
                    + ","
                    + pagecount
                    + ");\">"
                    + pagecount
                    + "</a></li>"
        }
    }
    // 尾页
    if (pageindex == pagecount) {
        pageHtml += "<li  class=\"disabled\"><a href=\"javascript:void(0);\"  style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-right\"></i></a></li>"

        pageHtml += "<li  class=\"disabled\"><a href=\"javascript:void(0);\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-double-right\"></i></a></li>"
    } else {

        pageHtml += "<li><a href=\"javascript:paging("
                + pagesize
                + ","
                + (pageindex + 1)
                + ");\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-right\"></i></a></li>"
        pageHtml += "<li><a href=\"javascript:paging("
                + pagesize
                + ","
                + pagecount
                + ");\" style=\"height:32px;padding-top: 7px;\"><i class=\"fa fa-angle-double-right\"></i></a></li>"

    }

    $("#ulpage").empty();
    $("#ulpage").html(pageHtml);

}

2、 引用js后，在table表格或需要分页的地方下 加

<table style="width: 100%">
    <tr>
        <td align="center">
            <ul class="pagination" id="ulpage">
            </ul>
        </td>
    </tr>
</table>

3、js
最主要的包含：

var pageNo = 1; 起始页
var pageSize = 5; //一页中有几条

//重新定义分页时页面绑定事件;
reBind = function() {
    pageNo = jumpIndex;
    searchRes(node);
}
paging(pageSize, pageNo);

rowcount ：总数

<script type="text/javascript">
    var pageNo = 1;
    var pageSize = 5; 

    var node = "";
    $(function() {

        //重新定义分页时页面绑定事件;
        reBind = function() {
            pageNo = jumpIndex;
            searchRes(node);
        }

        // 进入页面查询
        bindStartSearch();  
    });

    // 写成公共方法
    function pageRes(){
        pageNo = 1;
        searchRes(node);
        paging(pageSize, pageNo);
    }

    function bindStartSearch(){
        // 查詢列表
        searchRes(node);
        paging(pageSize, pageNo);
    }

    function searchRes(node) {
        $(".list_table tbody").empty();
        var searchData = createJsonValue("search");

        var rtype1 = $("#rtype1").val();
        searchData.rtype1 = rtype1;
        searchData.pageSize = pageSize;
        searchData.pageNo = pageNo;

        doAjax("${fns:getConfig('RESURL')}res/resourceInterface/resourceList",
                searchData, false, "bindList(data)", ""); 

        if(node != ""){
            // Don't do anything
        } else {
            $("#node_").addClass("active");
        }
    }

    /**
     *绑定删除事件
     **/
    function bindDelFn() {
        $('.btnDel').on('click', function() {
            var data_id = $(this).attr("data-id");
            var delData = {
                id : data_id + ","
            };
            layer.confirm('确定要删除该资源吗?', 
                {icon : 3, title : '删除提醒',
                offset : "350px"}, 
                function(index) {
                    doAjax("${fns:getConfig('RESURL')}res/resourceInterface/delete",
                        delData, false, "bindDel(data)", "");
                    layer.close(index);
                });
            });
    }

    // 返回删除信息
    function bindDel(data) {
        layer.msg("资源删除成功!", {icon: 1,offset : '350px'});
        paging(pageSize, pageNo);
    }

    function bindList(data) {
        //记录数
        rowcount = data.rowcount;

        $("#template_resList").tmpl(data).appendTo(".list_table tbody");   
    }


</script>
<style>
/********* 分页start *********/
.pagination > li > a, .pagination > li > span {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    color: inherit;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 4px 10px;
    position: relative;
    text-decoration: none;
}
/********* 分页end *********/
</style>

可能还需要引用 layer样式，该项目基于layer ，包下载地址 layer-v2.3

<!-- 引入layer插件 -->
<script src="${ctxStatic}/layer-v2.3/layer/layer.js"></script>
<script src="${ctxStatic}/layer-v2.3/layer/laydate/laydate.js"></script>

<link href="${ctxStatic}/awesome/4.4/css/font-awesome.min.css" rel="stylesheet" />