自己js写的分页小工具供大家参考

最新推荐文章于 2024-03-19 05:05:30 发布

yelloohe

最新推荐文章于 2024-03-19 05:05:30 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/u010649589/article/details/69972344

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 效果图;

2. 页面需要引入的js和css样式：

3. 页面显示区域需要写入的div格式：

<!--动态分页案例  -->			
	<div>	
		<!--分页显示数据区域 -->
		<div class="tbbox" >	
				
        <table class="table table-striped tableset" id = "queryPageTable">
				  <thead style="text-align: center;">
					<tr class="trcenter">
						<th>用户id</th>
						<th>用户姓名</th>
						<th>用户性别</th>					
					</tr>
				  </thead>
		<tbody></tbody>		
		</table>
						
        <!-- 分页导航栏 -->
        <div id="pagecount" class="fy"  style="padding-bottom: 10px;text-align: right;"></div>   	
    	</div> 		    				
	</div>

Ps:这部分div请直接粘贴，保证图中表格的id = "queryPageTable"和分页导航栏的id="pagecount"保持一致。

Ps：这部分请自行填写自己需要显示的表格头内容；

4. js调用部分说明：

Ps:这里说明一下recordArray[]里需要添加的内容：

我们后台传回的数据格式为：

{"pageIndex":2,"pageSize":3,"total":300",rows":[{"id":"4","name":"name4","sex":"sex4"},{"id":"5","name":"name5","sex":"sex5"},{"id":"6","name":"name6","sex":"sex6"}]}

在rows的对象里有id,name,sex 3个页面需要显示的属性，所以对应的recordArray[]里需要添加相应的属性保持对应关系，页面才可以对应的显示。

5 .后台Contrller层取参及返回：

Ps:从request里取得相应的页面params{}传过来的参数。调用service层返回结果，返回json字符串或者PageMessage类皆可。

6.js代码：

/**
 * hh 20170407
 * 封装js分页方法
 * html页面直接调用getData(pageIndex,url,recordArray,params)方法即可
 * 返回成功的数据形式类似为：
 * {"pageIndex":2,"pageSize":3,"total":300",rows":[{"id":"4","name":"name4","sex":"sex4"},{"id":"5","name":"name5","sex":"sex5"},{"id":"6","name":"name6","sex":"sex6"}]}
 * 
 * 关于ajax传入参数的说明：
 * data: params 这里可以另外传入pageSize属性 也可以不传直接使用后台定义的
 */


var curPage = 1; //当前页码
var total,pageSize,totalPage; //总记录数，每页显示数，总页数

var url = ""; //传入的url
var params = {};//传入的参数

//考虑将分页显示的tableID写死   以后有变化可以放开
//var tableId ="queryPageTable" ;         //table表的id


var recordArray = [];  //table表显示的参数

//使用前先清空全局变量
function clearParams(){
	recordArray.length = 0; //使用当前页面时清空列数据 ,因为这个数组是全局变量，防止其他页面调用次方法时出现脏数据 ;
	url = "";
	params = {};
	//console.info(params);
}


//获取数据
function getData(pageIndex,url,recordArray,params){  
	params["pageIndex"] = pageIndex;
    $.ajax({
        type: 'post',
        url: url,
        data:params,//{'pageIndex':pageIndex},
        dataType:'json',
        beforeSend:function(){
           //执行操作之前的操作
        },
        success:function(json){       	
        	$("#queryPageTable tbody").empty();//清空数据区
            total = json.total; //总记录数
            pageSize = json.pageSize; //每页显示条数
            curPage = json.pageIndex; //当前页
            
            totalPage = 
            ((total % pageSize) != 0) ? (total/pageSize + 1) : (total/pageSize); //总页数
            var list = json.rows;
            $.each(list,function(index,array){ //遍历json数据列                              
                /*$(".investApplyTbss").append("<tr><td>" + array['id']+ "</td>" 
						+"<td>"+ array['name']+"</td>"
						+"<td>" + array['sex'] +"</td></tr>"
				);*/    
            	//改为传入数组动态获取  
            	var trContent="<tr>";
            	for(var item in recordArray){           		
            		trContent+=("<td>"+array[recordArray[item]]+"</td>");
            	}           	           
            	trContent+="</tr>";              	
            	$("#queryPageTable tbody").append(trContent);
            });
        },
        complete:function(){ //生成分页条
            getPageBar();
            funPage();
        },
        error:function(){
            alert("数据加载失败");
        }
    });
}
//获取分页条
function getPageBar(){
    //页码大于最大页数
    if(curPage>totalPage) curPage=totalPage;
    
    //页码小于1
    if(curPage<1) curPage=1;
    
   pageStr = "<span style='float:left'>共"
			      	+total+"条 </span><span style='float:left'> "+curPage
			      	+"/"+totalPage+"</span>";
    
  //如果是第一页
    if(curPage==1){
    	pageStr += "<span data-page-target='first'>首页</span>"
    			+"<span  data-page-target='prev'>上一页</span>";
    }else{
    	pageStr += "<a href='javascript:void(0)' rel='1' data-page-target='first'>首页</a>"
			+"<a href='javascript:void(0)' rel='"+(curPage-1)+"' data-page-target='prev'>上一页</a>";
    }
    
    
    //如果是最后页
    if(curPage>=totalPage){      
        pageStr += "<span  data-page-target='next'>下一页</span>"
        		+"<span  data-page-target='last'>尾 页</span>";
    }else{  	
    	pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'  data-page-target='next'>下一页</a>"
    		+"<a href='javascript:void(0)' rel='"+totalPage+"' data-page-target='last'>尾 页</a>";
    }
    pageStr+="跳转到<input type='text' value='' style='width:50px;' class='w50' id='pagesNum'/>"
			+"<button  value='go'  style='cursor:pointer;' οnclick='goPages()'>go</button>" 
			+"</div>";
    $("#pagecount").html(pageStr);
}


//点击触发ajax事件
function funPage(){
    $("#pagecount a").on('click',function(){
        var rel = $(this).attr("rel");
       // alert(rel);
        if(rel){
            getData(rel,url,recordArray,params);
        }
    });  
}  

//跳转页面
function goPages(){
	var val = $("#pagesNum").val();	
	if(isNaN(val)){
		alert("请输入正确的数字");
		return;
	}else{
		if(val>totalPage){
			alert("超出最大页数");
			return;
		}else if(val<1){
			alert("小于最小页数");
			return;
		}else{
			getData(val,url,recordArray,params);
		};
	}
}

页面调用示例：

<script type="text/javascript">
$(function(){
	//1.清空相对应的全局变量
	clearParams();
	
	//2.需要传入的url
	url = "/lfiom-cpic-web/pageTest/pages"; 
	
	//3.拼装json数据返回的列值,取值时用到	
	recordArray.push("id");
	recordArray.push("name");
	recordArray.push("sex");
	//4.拼装需要传入的参数
	params["pageSize"] = 3;//这个可以使用后天自定义的页条数
	params["name"] = "1221";//传入相关的查询条件

	//初始第一页,并在相对应的div中显示
    getData(1,url,recordArray,params);
});

也就实现了基本的上一页，下一页，跳转页等功能，我是个菜鸟，写的不好，仅供参考