純粋なjs書き込みのページング機能で、表データはjson列です.
何も言わないで、直接コードをつけます.
<%@ 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> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var tableData = [{"C0":" _ ","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":" _ ","C1":96021.84,"C2":16725.63,"AREA_ID":"930013004"},{"C0":" _ ","C1":1845311.12,"C2":129478.93,"AREA_ID":"930013001"},{"C0":" _ ","C1":0,"C2":0,"AREA_ID":"930013801"},{"C0":" _ ","C1":256181.79,"C2":15185.98,"AREA_ID":"930013007"},{"C0":" _ ","C1":264312,"C2":402.6,"AREA_ID":"930013701"}];
var columns = [{"cid":"C0","ctext":" "},{"cid":"C1","ctext":" "},{"cid":"C2","ctext":" "}];
/**
page:
pageSize:
page pageSize ， ：
、 ，json ， action 。
、 key ， json
、 id
： ， 。 ， ， 。
*/
function splitPage(page,pageSize){
var ptable = document.getElementById("page_table");
var num = ptable.rows.length;//table.rows ， 1 N
//alert(num);
// tbody
for(var i=num-1;i>0;i--){
ptable.deleteRow(i);
}
var totalNums = tableData.length;//
var totalPage = Math.ceil(totalNums/pageSize);//
var begin = (page-1)*pageSize;// ( )
var end = page*pageSize;// ( )
end = end>totalNums?totalNums:end;
// tbody
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;
}
}
//
var pageBar = " "+page+" / "+totalPage+" "+" ";
if(page>1){
pageBar += "<a href=\"javascript:splitPage("+1+","+pageSize+");\"> </a> ";
}else{
pageBar += " ";
}
if(page>1){
pageBar += "<a href=\"javascript:splitPage("+(page-1)+","+pageSize+");\"> </a> ";
}else{
pageBar += " ";
}
if(page<totalPage){
pageBar += "<a href=\"javascript:splitPage("+(page+1)+","+pageSize+");\"> </a> ";
}else{
pageBar += " ";
}
if(page<totalPage){
pageBar += "<a href=\"javascript:splitPage("+(totalPage)+","+pageSize+");\"> </a> ";
}else{
pageBar += " ";
}
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>