Ajax做分页

用这种ajax做分页的方法比较简单，把代码直接复制就可以，然后根据实际更改一下里面的参数。

1.设置分页显示显示的样式，显示效果如下。

 

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:"微软雅黑"}
.b3{ list-style:none; width:400px; height:30px; font-size:16px; text-align:center; line-height:30px; vertical-align:middle; position:relative}
.b4{ width:50px; height:30px; float:left; font-size:20px; text-align:center; line-height:30px; vertical-align:middle}
.b4:hover{ cursor:pointer; background-color:#FC6}
#fy_shang{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px; float:left}
#fy_xia{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px}
#fy_shang:hover{ cursor:pointer; background-color:#FC6}
#fy_xia:hover{ cursor:pointer; background-color:#FC6}
</style>

 

 

2.页数显示代码容器，把这段代码放在</table>后面。

 

<!--分页开始-->
<center>
<ul class="pagination b3" id="fy_list">       
</ul>
<input type="hidden" value="1" id="fy_n" />
</center>
<!--分页结束-->  

 

 

3.ajax实现分页的代码

 

//ajax分页开始
$(document).ready(function(e) {
    JiaZai();
    var zys = 0;
//页面加载数据
})
function JiaZai()
    {        
        var n = $("#fy_n").val();//页数显示框里面显示的页数
        $.ajax({
                url:"shipinguanlichuli.php",
                data:{n:n,gjz:""},//n是显示的页数。gjz是表格显示中有关键字查询，这里gjz传一个空值，意思是没有查询条件，查询所有的。
                type:"POST",
                dataType:"JSON",
                success: function(data){                                    
                        var s ="";                        
                            for(var i in data)
                            {
                            s+="<tr><td><input type='checkbox' class='qx'  value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('确定删除吗？')\">删除</a></td></tr>";//拼接表格显示内容
                            }
                        $("#a22").html(s);//把拼接好的字符串放到要显