ajax和pagination实现动态分页的原生方法

<style>

/**分页样式*/
.l-page{
margin-top: 30px;
margin-bottom: 55px;
text-align: center;
}
.l-page .ui-pagination-container .ui-pagination-page-item.active{
background-color: #2771ff;;
border:1px solid #2771ff;
color: #fff;
}
.l-page .ui-pagination-container .ui-pagination-page-item{
margin: 0 3px;
padding: 4px 14px;
border:1px solid #dddddd;
color: #636363;
font-size: 14px;
border-radius: 2px;
text-decoration: none;
}
.l-page .ui-pagination-container .ui-pagination-page-item:hover{
color: #636363;
}
.l-page .ui-pagination-container .ui-pagination-page-item.active:hover{
color: #fff;
}
ul{
margin-left: 160px;
list-style: none;
}
ul li{
margin-bottom: 15px;
}
ul li span{
display: inline-block;
}
ul li span:first-child{
width: 150px;
}
</style>

<!--数据展示-->
<div id="mainContent"> 

</div>

<!--分页页码-->
<div class="l-page" id="pagination">

</div>


<script>
    $(function() {
        queryNewsList(1,0);
    });

    /*分页查询*/
    function queryNewsList(page,offset){
        /*每页展示条数，默认8条*/
        var limit = 8;
        $.ajax({
            cache: false,
            type: "post",
            url:"",
            data:{
                /*当前页码*/
                page:page,
                limit:limit,
                /*每页的偏移量(本页当前有多少条)*/
                offset:offset,
                /*排序字段名称*/
                sort:"",
                order:"desc"
            },
            async: false,
            dataType:"json",
            error: function(request) { },
            success: function(data) {
                $("#pagination").pagination({
                    /*当前页码*/
                    currentPage: page,
                    /*总页数*/
                    totalPage: Math.ceil(data.total/limit),//data.pages
                    /*是否显示首页、尾页 true：显示 false：不显示*/
                    isShow:true,
                    /*分页条显示可见页码数量*/
                    count:5,
                    /*第一页显示文字*/
                    homePageText:'首页',
                    /*最后一页显示文字*/
                    endPageText:'尾页',
                    /*上一页显示文字*/
                    prevPageText:'上一页',
                    /* 下一页显示文字*/
                    nextPageText:'下一页',
                    /*点击翻页绑定事件*/
                    callback: function(page) {
　　　　　　　　　　　　　　　//records.length:当前数据总条数
                        queryNewsList(page,data.records.length);
                    }
                });
                //console.log("offset："+data.records.length);
                var html ='';
                
                $('#mainContent').html(html);
            }
        });
    }

</script>

后台数据格式参考：

 

 

 

其中ajax请求中的data数据根据需要进行变动。

分页相关数据根据后台返回数据进行取值。