JQ分页

来源：互联网发布：mac上传图片编辑：程序博客网时间：2024/06/05 16:44

var curPage = 1; //当前页码
    var total,pageSize,totalPage; //总记录数，每页显示数，总页数
    getData(1);
    $("#pagecount").on('click','span a',function(){
        var rel = $(this).attr("rel");
        if(rel){
            getData(rel);
        }
    });
    function getData(page){
        $.ajax({
            url:ThinkPHP['MODULE']+'/Votesubject/getVotesubjectList',
            type:'POST',
            data: {'pageNum':page-1},
            beforeSend:function(){
                 
            },
            success:function(json){
                // console.log(json);
                total = json.total; //总记录数
                pageSize = json.pageSize; //每页显示条数
                curPage = page; //当前页
                totalPage = json.totalPage; //总页数
                var ul=$('.theme_body').find('*').remove();
                string='';
                $.each(json.list,function(index,array){ //遍历json数据列
                    string+='';
                     
                });
                $('.theme_body').append(string);
                 
            },
            complete:function(){ //生成分页条
                getPageBar();
            },
            error:function(){
                alert("数据加载失败");
            }
        });
    }
    //获取分页条
function getPageBar(){
    $("#pagecount").find('*').remove();
    //页码大于最大页数
    if(curPage>totalPage) curPage=totalPage;
    //页码小于1
    if(curPage<1) curPage=1;
    pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
     
    //如果是第一页
    if(curPage==1){
        pageStr += "<span>首页</span><span>上一页</span>";
    }else{
        pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
    }
     
    //如果是最后页
    if(curPage>=totalPage){
        pageStr += "<span>下一页</span><span>尾页</span>";
    }else{
        pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
    }  
    $("#pagecount").append(pageStr);
}

　　css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
.pagecount{
    text-align: center;
    margin-bottom: 5px;
    padding:15px 15px 20px 0;
}
.pagecount span{
    display: inline-block;
    background: #ddd;
    margin:0 0 0 5px;
    width:40px;
    text-align: center;
    padding:2px 8px 2px 8px;
    border:1px solid #eee;
    color: #666;
}
.pagecount span a{
    color:#333;
}
.pagecount span a:hover{
    text-decoration: underline;
}
     
</style>

　　html前端

<ul class="theme_body"></div><div id="pagecount"class="pagecount"></div>

后台数据处理

public function getVotesubjectList(){        if(IS_AJAX){            $page=I('post.pageNum');//当前页            $Votesubject=D('Votesubject');            $total =$Votesubject->count();//总记录数            $pageSize = 1; //每页显示数            $totalPage = ceil($total/$pageSize); //总页数            $startPage = $page*$pageSize; //开始记录            $limit="$startPage,$pageSize";            //构造数组            $arr['total'] = $total;            $arr['pageSize'] = $pageSize;            $arr['totalPage'] = $totalPage;            $list=$Votesubject->getList($limit);            $arr['list']=$list;            $this->ajaxReturn($arr);        }        else{        }    }

阅读全文

0 0