js+div+css分页

<%-- JS --%>

 (function ($) {
    $.fn.extend({
        CreatePaging: function (options) {
            var pagingBtn = this;
            CreatePagingBtn(pagingBtn, options);
            //数字分页按钮
            $(this).find(".number").live("click", function () {
                options.currentPage = parseInt($(this).text());
                //创建分页按钮
                CreatePagingBtn(pagingBtn, options);
            });
            //上一页分页按钮
            $(this).find(".prev").live("click", function () {
                var currentPage = options.currentPage;
                if (currentPage > 1) {
                    options.currentPage = currentPage - 1;
                    CreatePagingBtn(pagingBtn, options);
                }
            });
            //下一页分页按钮
            $(this).find(".next").live("click", function () {
                var currentPage = options.currentPage;
                var pageCount = options.pageCount;
                if (currentPage < pageCount) {
                    options.currentPage = currentPage + 1;
                    CreatePagingBtn(pagingBtn, options);
                }
            });
            //跳转按钮
            $(this).find(".goto").live("click", function () {
                var currentPage = parseInt($(".txtGotoNumber").val());
                var pageCount = options.pageCount;
                if (currentPage >= 1 && currentPage <= pageCount) {
                    options.currentPage = currentPage;
                    CreatePagingBtn(pagingBtn, options);
                }
            });
        }
    });
})(jQuery);


function CreatePagingBtn(pagingBtn, options) {
    //获取页总数
    var pageCount = options.pageCount;
    //获取当前页
    var currentPage = options.currentPage;
    //获取显示的按钮总数
    var btnCount = options.btnCount;
    //获取是否启用数字分页
    var isEnableNumberPaging = options.isEnableNumberPaging;
    //获取是否启用上一页分页
    var isEnablePrevPaging = options.isEnablePrevPaging;
    //获取是否启用下一页分页
    var isEnableNextPaging = options.isEnableNextPaging;
    //获取是否启用跳转
    var isEnableGoto = options.isEnableGoto;
    //获取是否显示页提示
    var isShowPageHint = options.isShowPageHint;
    if (pageCount > 0) {
        var btn_html = "";
        if (isShowPageHint == true) {
            btn_html += "<div class='pageHint'>共<span class='dataCount'>" + options.dataCount + "</span>条记录，<span class='currentPage'>" + currentPage + "</span>/<span class='pageCount'>" + pageCount + "</span>页</div>";
        }
        if (isEnablePrevPaging == true) {
            btn_html += "<div class='prev'>上一页</div>";
        }
        if (isEnableNumberPaging == true) {
            if (pageCount > btnCount) {
                var frontBtnCount = Math.floor((btnCount - 3) / 2);
                var behindBtnCount = Math.ceil((btnCount - 3) / 2);
                if (currentPage == 1) {
                    btn_html += "<div class='number click'>" + 1 + "</div>";
                }
                else {
                    btn_html += "<div class='number'>" + 1 + "</div>";
                }
                if (currentPage - frontBtnCount > 1) {
                    btn_html += "<span class='ellipsis'>...</span>";
                }
                for (var i = currentPage - frontBtnCount; i <= currentPage + behindBtnCount; i++) {
                    if (i < pageCount && i > 1) {
                        if (i == currentPage) {
                            btn_html += "<div class='number click'>" + i + "</div>";
                        }
                        else {
                            btn_html += "<div class='number'>" + i + "</div>";
                        }
                    }
                }
                if (i < pageCount) {
                    btn_html += "<span class='ellipsis'>...</span>";
                }
                if (currentPage == pageCount) {
                    btn_html += "<div class='number click'>" + pageCount + "</div>";
                }
                else {
                    btn_html += "<div class='number'>" + pageCount + "</div>";
                }
            }
            else {
                for (var i = 1; i <= pageCount; i++) {
                    if (i == currentPage) {
                        btn_html += "<div class='number click'>" + i + "</div>";
                    }
                    else {
                        btn_html += "<div class='number'>" + i + "</div>";
                    }
                }
            }
        }
        if (isEnableNextPaging == true) {
            btn_html += "<div class='next'>下一页</div>";
        }
        if (isEnableGoto == true) {
            btn_html += "<div class='goto_number'>跳转到<input class='txtGotoNumber' type='text' value='" + options.currentPage + "' /></div>";
            btn_html += "<div class='goto'>GO</div>";
        }
        $(pagingBtn).html(btn_html);
        if (options.success != undefined) {
            options.success(options);
        }
    }
    else {
        $(pagingBtn).html("");
    }
}

<%-- JS --%>

<%-- CSS --%>

*
{
    margin: 0px;
    padding: 0px;
}
.paging_btn
{
    text-align: center;
}
.paging_btn .prev
{
    width: 64px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    border: 1px solid #DEDEDE;
    margin: 0px 2px;
    padding: 0px 5px;
    color: #939393;
}
.paging_btn .next
{
    width: 64px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    border: 1px solid #DEDEDE;
    margin: 0px 2px;
    padding: 0px 5px;
    color: #939393;
}
.paging_btn .number
{
    width: 22px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    border: 1px solid #DEDEDE;
    margin: 0px 2px;
    color: #595959;
}
.paging_btn .ellipsis
{
    width: 24px;
    color: #595959;
}
.paging_btn .click
{
    background: #FFBA01;
    color:White;
}
.paging_btn .prev:hover
{
    cursor: pointer;
}
.paging_btn .next:hover
{
    cursor: pointer;
}
.paging_btn .number:hover
{
    cursor: pointer;
}
.paging_btn .goto_number
{
    display: inline-block;
    color:#535353;
    margin-left:20px;
}
.paging_btn .txtGotoNumber
{
    width:22px;
    height:18px;
    border:1px solid #D1D1D1;
    color:#636363;
    text-align:center;
}
.paging_btn .goto
{
    width:37px;
    height:18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
    background: #3E403F;
    color:#FFFFFF;
    margin-left:10px;
}
.paging_btn .goto:hover
{
    cursor: pointer;
}
.paging_btn .pageHint
{
    display: inline-block;
    color:#51534E;
}
.paging_btn .dataCount
{
    color:#2773AF;
}

<%-- CSS --%>

<%-- HTML--%>

 <div id="pa2" class="paging_btn" data-pagesize="6" style="margin-top: 10px;">
  </div>

<%-- HTML --%>

<%-- Ajax页面加载事件 --%>

var sum = <%=Count %> ;//获取总数

//调用事件

$("#pa2").CreatePaging({
        pageCount:Math.ceil( sum/10),
        currentPage:1,
        btnCount:10,
        isEnableNumberPaging: true,
        isEnablePrevPaging: true,
        isEnableNextPaging: true,
        isEnableGoto: true,
        isShowPageHint: true,
        dataCount:sum,
        success:function(options)
        {
            $.ajax({
            type: "POST",//POST提交
            url: "SelecteInformation.aspx/Informationlist",//页面地址/方法
            data: "{'pag':'" + options.currentPage + "'}",//参数
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var arary = eval(data.d);//返回数据集合
                console.log(arary);//编译
                $(".Central").html("");//显示数据层div
                var strhtml = '';
                for (var i in arary) {//遍历数据存放strhtml
                    
                }
                $(".Central").html(strhtml);
                }
            })
         }
    })

<%-- Ajax页面加载事件 --%>