jqpagination实例

引用的js：

    <script src="~/Content/Mobile/js/jquery.min.js"></script>

    <script src="~/Content/Mobile/js/jquery.jqpagination.js"></script>

引用的样式及应用的样式：

    <link href="~/Content/Mobile/css/jqpagination.css" rel="stylesheet" />

.pagination a{
        width: auto;
        padding: 5px;
        line-height: 30px;
        height: auto;
        color: #84bef2;
    }
    .pagination input {
        height: 100%;
        font-size: large;
        padding: 10px;
    }

html代码：
        <div id="divAffairList" class="posts-con min-height600">
        </div>
        <div class="pagination">
            <a href="#" class="first" data-action="first">首页</a>
            <a href="#" class="previous" data-action="previous">上一页</a>
            <input type="text" data-max-page="40" />
            <a href="#" class="next" data-action="next">下一页</a>
            <a href="#" class="last" data-action="last">尾页</a>
        </div>

js代码：

    var typeId = 0;
    var groupId = 0;
    var isHandleTypeId = 0;
    var affairNameId = "";

//HTML事项列表
    function HtmlAffairList(data) {
        $("#divAffairList").html("");
        var htmlStr = "";
        $.each(data, function () {
            htmlStr += '<div class="posts_titmain"><div class="posts_tit" style="font-size: 16PX;max-width:100%"><a href="/mobile/online?affaircode=' + this.AffairCode + '" title="' + this.AffairName + '" >' + this.AffairName + '</a></div>';
            htmlStr += '</div>';
        });
        //查询不到内容时
        if (htmlStr == "") {
            htmlStr += '<div class="wdzj_norecord"><span class="wdzj_norecord2">很抱歉，暂时没有查询到信息!</span></div>';
        }
        $("#divAffairList").html(htmlStr);
    }

function ChangePage(page_index) {
        $.ajax({
            type: "post",
            url: "/Affairs/GetAffairsList",
            data: { typeCode: typeId, groupNum: groupId, isHandleType: isHandleTypeId, affairName: affairNameId, pagenumber: page_index },
            dataType: "json",
            async: true,
            success: function (myjson) {
                HtmlAffairList(myjson.data);//HTML事项列表
            }
        });
        return true;
    }
    //依据类型和分组查询事项
    function GetAffairList(typeCode, typeName, groupNum, isHandleType, affairName) {

        typeId = typeCode;
        groupId = groupNum;
        isHandleTypeId = isHandleType;
        affairNameId = affairName;

        $.ajax({
            type: "post",
            url: "/Affairs/GetAffairsList",
            data: { typeCode: typeCode, groupNum: groupNum, isHandleType: isHandleType, affairName: affairName },
            dataType: "json",
            async: true,
            success: function (myjson) {
                HtmlAffairList(myjson.data);//HTML事项列表
                $('.pagination').jqPagination({
                    max_page: myjson.count,
                    page_string: '当前 {current_page} / {max_page}',
                    paged: function (page) {

//点击页码要做的操作

//如果是无刷新分页的话，就可以写成 getDataByPage(page) 这里 getDataByPage 是一个从服务端获取指定页数据的方法

//如果是一般动态页或者是静态页的话，就直接跳转到相应的页面   location.href="view.aspx?id="+page  或者 location.href="view-"+page+".html"
                        ChangePage(page)
                    }
                });
            }
        });

}

效果图： 

以上参考网上各种资料