 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<%@ taglib prefix="s" uri="/struts-tags" %> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<title>分頁(yè)</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript"> 
var tableData = [{"C0":"臨夏州_康樂(lè)縣","C1":190893.39,"C2":24544.65,"AREA_ID":"930013005"},{"C0":"臨夏州_永靖縣","C1":368900.35,"C2":40592.19,"AREA_ID":"930013006"},{"C0":"蘭州市_東崗分局","C1":88.48,"C2":126.4,"AREA_ID":"930013106"},{"C0":"臨夏州_臨夏縣","C1":107337.9,"C2":20612.1,"AREA_ID":"930013008"},{"C0":"臨夏州_廣河縣","C1":69738.07,"C2":34894.44,"AREA_ID":"930013003"},{"C0":"臨夏州_和政縣","C1":46622.96,"C2":20954.97,"AREA_ID":"930013002"},{"C0":"臨夏州_東鄉(xiāng)縣","C1":96021.84,"C2":16725.63,"AREA_ID":"930013004"},{"C0":"臨夏州_臨夏市中心","C1":1845311.12,"C2":129478.93,"AREA_ID":"930013001"},{"C0":"天水市_秦州區(qū)","C1":0,"C2":0,"AREA_ID":"930013801"},{"C0":"臨夏州_積石山","C1":256181.79,"C2":15185.98,"AREA_ID":"930013007"},{"C0":"酒泉_肅州區(qū)","C1":264312,"C2":402.6,"AREA_ID":"930013701"}]; 
var columns = [{"cid":"C0","ctext":"區(qū)縣"},{"cid":"C1","ctext":"客戶總收入"},{"cid":"C2","ctext":"當(dāng)月出賬費(fèi)用"}]; 
/** 
page:頁(yè)碼 
pageSize:每頁(yè)的記錄條數(shù) 
此方法除了傳入page和pageSize之外，還應(yīng)知道的有三個(gè)參數(shù)： 
一、表的全部數(shù)據(jù)，json串格式，可通過(guò)action查詢數(shù)據(jù)庫(kù)得到。 
二、表頭所對(duì)應(yīng)的列的key及名稱，也是json串格式 
三、表所對(duì)應(yīng)的id 
注：此處只是適合表頭只有一行，且事先寫好的情況。您可以根據(jù)需要改一下，邏輯思路就是這樣，歡迎批評(píng)指正。 
*/ 
function splitPage(page,pageSize){ 
var ptable = document.getElementById("page_table"); 
var num = ptable.rows.length;//table.rows返回表格中包含的所有行，此處假設(shè)表由表頭1行和表體N行組成 
//alert(num); 
//清除tbody 
for(var i=num-1;i>0;i--){ 
ptable.deleteRow(i); 
} 
var totalNums = tableData.length;//總行數(shù) 
var totalPage = Math.ceil(totalNums/pageSize);//總頁(yè)數(shù) 
var begin = (page-1)*pageSize;//頁(yè)起始位置(包括) 
var end = page*pageSize;//頁(yè)結(jié)束位置(不包括) 
end = end>totalNums?totalNums:end; 
//向tbody中寫入數(shù)據(jù) 
var n = 1;//tbody的起始行 
for(var i=begin;i<end;i++){ 
var row = ptable.insertRow(n++); 
var rowData = tableData[i]; 
for(var j=0;j<columns.length;j++){ 
var col = columns[j].cid; 
var cell = row.insertCell(j); 
var cellData = rowData[col]; 
cell.innerHTML = cellData; 
} 
} 
//生成分頁(yè)工具條 
var pageBar = "第"+page+"頁(yè)/共"+totalPage+"頁(yè)"+" "; 
if(page>1){ 
pageBar += "<a href=\"javascript:splitPage("+1+","+pageSize+");\">首頁(yè)</a> "; 
}else{ 
pageBar += "首頁(yè) "; 
} 
if(page>1){ 
pageBar += "<a href=\"javascript:splitPage("+(page-1)+","+pageSize+");\">上一頁(yè)</a> "; 
}else{ 
pageBar += "上一頁(yè) "; 
} 
if(page<totalPage){ 
pageBar += "<a href=\"javascript:splitPage("+(page+1)+","+pageSize+");\">下一頁(yè)</a> "; 
}else{ 
pageBar += "下一頁(yè) "; 
} 
if(page<totalPage){ 
pageBar += "<a href=\"javascript:splitPage("+(totalPage)+","+pageSize+");\">尾頁(yè)</a> "; 
}else{ 
pageBar += "尾頁(yè) "; 
} 
document.getElementById("page_bar").innerHTML = pageBar; 
} 
</script> 
</head> 

<body onload="splitPage(1,3);"> 
<table id="page_table"> 
<thead> 
<tr> 
<th>h1</th> 
<th>h2</th> 
<th>h3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>111</td> 
<td>222</td> 
<td>333</td> 
</tr> 
</tbody> 
</table> 
<div id="page_bar"></div> 
</body> 
</html> 