分页显示样式参考

#fy_shang:hover{ cursor:pointer}
#fy_xia:hover{ cursor:pointer}
.fy_zhong:hover{ cursor:pointer}

 

 

//进入页面或者刷新页面后显示
$(document).ready(function(e) {
        JiaZai();
        var zys = 0;
        //页面加载数据
        })
        function JiaZai()
        {        
            var n = $("#fy_n").val();//页数显示框里面显示的页数
            $.ajax({
            url:"../chuli/xianshichuli.php",
            data:{n:n},
            type:"POST",
            dataType:"JSON",
            success: function(data){
                var s ="";                        
                for(var i in data)
                {
                    s = s+"<tr><td class='lie'><input type='checkbox' value='"+data[i].uid+"' class='qx' /></td><td class='lie'>"+data[i].uid+"</td><td class='lie'>"+data[i].pwd+"</td><td class='lie'>"+data[i].name+"</td><td class='lie'>"+data[i].sex+"</td><td class='lie'>"+data[i].class+"</td><td class='lie'>"+data[i].gongsi+"</td><td class='lie'>"+data[i].boke+"</td><td class='lie'><button class='btn btn-primary btn-lg bianji' data-toggle='modal' data-target='#myModal' code='"+data[i].uid+"'>编辑</button></td><td class='lie'><a href='../chuli/delete.php?code="+data[i].uid+"' onclick=\"return confirm('确定删除吗？')\"><button class='btn btn-primary btn-lg' data-target='#myModal'>删除</button></a></td></tr>";    
                }
                $("#tb").html(s);//把拼接好的字符串放到要显示的div里面。
                
                $(".bianji").click(function(){
                        var code = $(this).attr("code");
                        $.ajax({
                        url:"../chuli/bianjichuli.php",
                        data:{code:code},
                        type:"POST",
                        dataType:"TEXT",
                        success: function(data){
                            var lie = data.split("^");
                            var str = "";
                            str = str+"<form action='../chuli/updatechuli.php' method='post'><div class='input-group'><span class='input-group-addon'>用户名</span><input type='text' class='form-control' value='"+lie[0]+"' name='uid' /></div></br><div class='input-group'><span class='input-group-addon'>密&nbsp;&nbsp;&nbsp;码</span><input type='text' class='form-control' value='"+lie[1]+"' name='pwd' /></div></br><div class='input-group'><span class='input-group-addon'>姓&nbsp;&nbsp;&nbsp;名</span><input type='text' class='form-control' value='"+lie[2]+"' name='name' /></div></br><div class='input-group'><span class='input-group-addon'>性&nbsp;&nbsp;&nbsp;别</span><input type='text' class='form-control' value='"+lie[3]+"' name='sex' /></div></br><div class='input-group'><span class='input-group-addon'>班&nbsp;&nbsp;&nbsp;级</span><input type='text' class='form-control' value='"+lie[4]+"' name='class' /></div></br><div class='input-group'><span class='input-group-addon'>公&nbsp;&nbsp;&nbsp;司</span><input type='text' class='form-control' value='"+lie[5]+"' name='gongsi' /></div></br><div class='input-group'><span class='input-group-addon'>博&nbsp;&nbsp;&nbsp;客</span><input type='text' class='form-control' value='"+lie[6]+"' name='boke' /></div></br><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button><button type='submit' class='btn btn-primary'>提交修改</button></div></form>";
                            $("#nr").html(str);
                            }
                        })
                    })     
                                                                    
            }
        });
                        
        //获取分页数(列表)
        $.ajax({
            url:"../chuli/xianshichuli2.php",
            data:{},
            type:"POST",
            dataType:"TEXT",
            success: function(data){ 
                //总页数
                var ys = Math.ceil(data/10); 
                zys = ys;
                
                var s = "<li><a id='fy_shang'>&laquo;</a></li>";
                var dangqian = $("#fy_n").val(); //当前页数   
                for(var i=dangqian-2;i<=dangqian+2;i++)
                {
                    if(i>0 && i<=ys)
                    {
                        if(dangqian==i)
                        {
                            s+="<li class='active'><a class='fy_zhong'>"+i+"</a></li>";
                        }
                        else
                        {
                            s+="<li><a class='fy_zhong'>"+i+"</a></li>"
                        }
                    }
                }
                s += "<li><a id='fy_xia'>&raquo;</a></li>";
                $("#fy_list").html(s);
                        
                //给分页列表加事件
                JiaShiJian();
            }
        })
    　　//给分页列表加事件的方法
    　　function JiaShiJian()
    　　{
    　　　　$("#fy_shang").click(function(){    
    　　　　var n = $("#fy_n").val(); 
    　　　　if(n>1)
    　　　　{
    　　　　　　n--;
    　　　　}
    　　　　else
    　　　　{
    　　　　　　n=1;
    　　　　}
    　　　　　　$("#fy_n").val(n);
    
    　　　　//加载数据
    　　　　JiaZai();
    　　　　})
    　　　　$("#fy_xia").click(function(){
    　　　　var n = $("#fy_n").val(); 
    　　　　if(n<zys)
    　　　　{
    　　　　　　n++;
    　　　　}
    　　　　else
    　　　　{
    　　　　　　n=zys;
    　　　　}
    　　　　$("#fy_n").val(n);
    
    　　　　//加载数据
    　　　　JiaZai();
    　　　　})
    　　　　　　$(".fy_zhong").click(function(){
    　　　　　　var n = $(this).text();
    　　　　　　$("#fy_n").val(n);
    
    　　　　//加载数据
    　　　　JiaZai();
     
    　　　　})
    　　}        
    
    }