前面写的那个分页主要用于前台网页一览列表的展示，每次点击下一页时将要刷新整个页面的数据， 下面的这个分页将克服上面的分页的问题，只刷新页面中一部分代码，比方说页面的某一个div层，其效果虽比不上某些框架（比如easyui，ligerUI等）datagrid, 但如果配上一个好的css样式,应用范围将非常广
HTML 代码
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//下面的JavaScript 可以直接放在这里
<pre name="code" class="html"></script>
</head>
<body>
<div>
<div class="box_center">
<table class="form_table" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" class="td_right">企业名称：</td>
<td width="313" class="">
<input name="name" id="name" class="input-text lh30" size="40" maxlength="20" value="<s:property value="name" />" />
</td>
<td>
<input type="button" name="button" class="btn btn82 btn_search" οnclick="doSearch(1)" value="搜索">
</td>
</tr>
</table>
</div>
<div id="table" class="m10"> </div>
</div>
</body>
</html>
JavaScript 代码
//页面初始化时加载
$(function(){
doSearch(1); //初始化加载第一页
});
<pre name="code" class="javascript">//进入第几页
function setPage(page){
doSearch(page);
}
//跳转到第几页
function gotopage(pagecount){
var page=document.getElementById("CPV30").value;
if (!checkInputNull("页数", "CPV30")) {
return;
}
if(!checkNumeric3("页数", "CPV30",6)){
return;
}
if(page>pagecount){
alert("您输入的页数超过了总页数！");
return;
}
doSearch(page);
}
//附带查询条件搜索 page:第几页 rows:每页多少行 name: 附带其他查询条件
function doSearch(page){
var name=document.getElementById("name").value;
var params={'page':page,'rows':10,'name':name};
load(params);
}
//加载数据
function load(param){
var currentPage=param.page;
$.post('getCompanyList.do',param, function(data){
//每页显示数据条数
var row=page.rows;
var totalcount=0;
//增加内容层
var newsHTML='<div class="box span10 oh"><table style="width:100%;table-layout:fixed;" border="0" cellpadding="0" cellspacing="0" class="list_table">';
newsHTML+='<tr>'+
'<th width="7%"></th>'+
'<th width="40%">企业名称</th>'+
'<th width="13%">联系人</th>'+
'<th width="19%">联系电话</th>'+
'<th width="10%">状态</th>'+
'</tr>';
if(data.total>0){
totalcount=data.rows[0].counts;
for(var i=0;i<data.rows.length;i++){
xuhao=(currentPage-1)*row+i+1;
newsHTML+='<tr class="tr" id="tr'+i+'" οnclick="getid(\''+data.rows[i].name+'\',\''+data.rows[i].companyid+'\');" οndblclick="returnvalue();" >';
newsHTML+='<td class="td_center">'+xuhao+'</td>';
newsHTML+='<td class="td_left" style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis;" title="'+data.rows[i].name+'">'+data.rows[i].name+'</td>';
newsHTML+='<td class="td_left" style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis;" title="'+data.rows[i].contacts+'">'+data.rows[i].contacts+'</td>';
newsHTML+='<td class="td_center">'+data.rows[i].telephone+'</td>';
if(data.rows[i].status==1){
newsHTML+='<td class="td_center">'+'开户'+'</td>';
}else if(data.rows[i].status==2){
newsHTML+='<td class="td_center">'+'销户'+'</td>';
}else if(data.rows[i].status==0){
newsHTML+='<td class="td_center">'+'新增'+'</td>';
}
newsHTML+='</tr>'
}
}else{
newsHTML+='<tr class="tr" >';
newsHTML+='<td style="text-align: center;" colspan=14>无数据显示</td>';
newsHTML+='</tr>';
totalcount=0;
currentPage=1;
}
newsHTML+='</table></div>';
//总页数
var pagecount=Math.ceil((data.total)/row);
//增加分页层
newsHTML+='<div id="paging" style="text-align: center;"> <table width="100%"><tr>';
newsHTML+='<td style="text-align:left">共'+totalcount+'条，当前第'+currentPage+'/'+pagecount+'页';
if(currentPage==1){
newsHTML+='<td width="35px">首页</td>';
newsHTML+='<td width="45px">上一页</td>';
}else{
newsHTML+='<td width="35px"><A HREF="javascript:setPage(1);">首页</A></td>';
newsHTML+='<td width="45px"><A HREF="javascript:setPage('+(parseInt(currentPage)-1)+');">上一页</A></td>';
}
if(currentPage==pagecount||pagecount==0){
newsHTML+='<td width="45px">下一页</td>';
newsHTML+='<td width="35px">末页</td>';
}else{
newsHTML+='<td width="45px"><A HREF="javascript:setPage('+(parseInt(currentPage)+1)+');">下一页</A></td>';
newsHTML+='<td width="35px"><A HREF="javascript:setPage('+pagecount+');">末页</A></td>';
}
newsHTML+='<td width="35px">转到</td><td width="25px"><input type="text" style="width: 20px;border:1px solid black" size="5" maxlength="3" value="'+currentPage+'" id="CPV30" name="CPV30">';
newsHTML+='</td><td width="30px"><input type="button" value="GO" onClick="gotopage('+pagecount+');">';
newsHTML+='</td></tr></table></div>';
document.getElementById("table").innerHTML=newsHTML;
});
}
青色背景为主要
分页部分 , 可以提取出来写在一个function中,作为通用函数,另外setPage(page) 和gotopage(pagecount)都可以作为通用函数调用,
代码中的style样式可以写到css样式文件中 ,希望读者能够灵活使用
通过post返回的数据格式为
{"total":"12",
"rows":[
{"companyid":26,"status":0,"email":"feng@wb.ced","address":"同里镇松汾线994号","name":"龙城网吧","counts":12,"telephone":"143245432654","contacts":"陈老板"},
{"companyid":25,"status":0,"email":"fenglb@dfc.cd","address":"黎里镇江厍路98号","name":"联华超市","counts":12,"telephone":"18932324465","contacts":"冯老板"},
{"companyid":24,"status":0,"email":"li@fs.omd","address":"松陵镇仲英大道33号,流虹路343号","name":"大胡子囍蛋馆","counts":12,"telephone":"178343434546","contacts":"李大魁"},
{"companyid":23,"status":0,"email":"zhen@df.drf","address":"松陵镇滨中路12号","name":"吴江市松陵镇第一中学","counts":12,"telephone":"189845454545","contacts":"郑中石"},
{"companyid":22,"status":0,"email":"zh.ou@asdf.com","address":"松陵镇江兴西路343号","name":"松陵镇文化体育站","counts":12,"telephone":"156666666666","contacts":"周CC"},
{"companyid":21,"status":0,"email":"ouyang@df.com","address":"松陵镇通南路 松汾路南","name":"吴江市松陵镇江新小学","counts":12,"telephone":"178342299999","contacts":"欧阳利丰校长"},
{"companyid":19,"status":1,"email":"liu@fdsa.com","address":"松陵镇鲈乡南路44号,明珠广场43号","name":"明珠大厦","counts":12,"telephone":"189834343223","contacts":"刘大胜"},
{"companyid":18,"status":0,"email":"dong@dsc.com","address":"松陵镇文苑路34号","name":"东恒盛国际大酒店","counts":12,"telephone":"143333333333","contacts":"董先生"},
{"companyid":17,"status":0,"email":"li@dfds.com","address":"松陵镇长安路33号","name":"吴江区人力资源和社会保障局","counts":12,"telephone":"178343435465","contacts":"李松平"},
{"companyid":16,"status":0,"email":"zhang@wjqzf.com","address":"松陵镇中山南路高新路交叉路口","name":"吴江区政府","counts":12,"telephone":"178888888888","contacts":"张主任"}
]}
最后效果如下图（注：部分不相干的代码已经删除，图片中数据均属伪造测试数据，如有相同，实属巧合，与本人无关）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
