zoukankan      html  css  js  c++  java
  • jquery+ajax实现分页

    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样式

    <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;
        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{
    
            }
        }

    说明:后台我用的是thinkphp框架

  • 相关阅读:
    Unity制作地形的常用插件之GAIA
    JetBrains套装免费学生授权申请(IntelliJ, ReSharper, WebStorm...)
    Unity2D游戏开发之保卫萝卜
    Unity制作出《超级马里奥》的2D和3D混合效果
    Unity2019.1中文技术手册离线版
    暗黑战神! Unity3D网游ARPG实战案例
    Unity移动端入门
    win10如何查看电脑端口使用情况
    自制FastDFS文件服务器虚拟机分享
    MySQL:使用SQL语句删除所有索引
  • 原文地址:https://www.cnblogs.com/-lin/p/6214807.html
Copyright © 2011-2022 走看看