前面寫的那個分頁主要用於前臺網頁一覽列表的展示，每次點擊下一頁時將要刷新整個頁面的數據， 下面的這個分頁將克服上面的分頁的問題，只刷新頁面中一部分代碼，比方說頁面的某一個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><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" onclick="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+'" onclick="getid(\''+data.rows[i].name+'\',\''+data.rows[i].companyid+'\');" ondblclick="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":"[email protected]","address":"同裏鎮鬆汾線994號","name":"龍城網吧","counts":12,"telephone":"143245432654","contacts":"陳老闆"},
{"companyid":25,"status":0,"email":"[email protected]","address":"黎裏鎮江厙路98號","name":"聯華超市","counts":12,"telephone":"18932324465","contacts":"馮老闆"},
{"companyid":24,"status":0,"email":"[email protected]","address":"鬆陵鎮仲英大道33號,流虹路343號","name":"大鬍子囍蛋館","counts":12,"telephone":"178343434546","contacts":"李大魁"},
{"companyid":23,"status":0,"email":"[email protected]","address":"鬆陵鎮濱中路12號","name":"吳江市鬆陵鎮第一中學","counts":12,"telephone":"189845454545","contacts":"鄭中石"},
{"companyid":22,"status":0,"email":"[email protected]","address":"鬆陵鎮江興西路343號","name":"鬆陵鎮文化體育站","counts":12,"telephone":"156666666666","contacts":"周CC"},
{"companyid":21,"status":0,"email":"[email protected]","address":"鬆陵鎮通南路 鬆汾路南","name":"吳江市鬆陵鎮江新小學","counts":12,"telephone":"178342299999","contacts":"歐陽利豐校長"},
{"companyid":19,"status":1,"email":"[email protected]","address":"鬆陵鎮鱸鄉南路44號,明珠廣場43號","name":"明珠大廈","counts":12,"telephone":"189834343223","contacts":"劉大勝"},
{"companyid":18,"status":0,"email":"[email protected]","address":"鬆陵鎮文苑路34號","name":"東恆盛國際大酒店","counts":12,"telephone":"143333333333","contacts":"董先生"},
{"companyid":17,"status":0,"email":"[email protected]","address":"鬆陵鎮長安路33號","name":"吳江區人力資源和社會保障局","counts":12,"telephone":"178343435465","contacts":"李鬆平"},
{"companyid":16,"status":0,"email":"[email protected]","address":"鬆陵鎮中山南路高新路交叉路口","name":"吳江區政府","counts":12,"telephone":"178888888888","contacts":"張主任"}
]}最後效果如下圖（注：部分不相干的代碼已經刪除，圖片中數據均屬僞造測試數據，如有相同，實屬巧合，與本人無關）
