纯js写的分页表格数据为json串
更新时间：2014年02月18日 16:34:11 作者：
这篇文章主要介绍了纯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>
复制代码 代码如下:
<%@ 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>
相关文章
弹出模式化遮罩层的方法有很多，在本文为大家介绍下使用js实现最简单的模式化遮罩层，具体如下，感兴趣的朋友不要错过2013-12-12
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
最近用CodeMirror2作后台的模板编辑器，在IE9、Firefox下面没有问题。到了IE7、IE8下面，textarea里面的代码就显示不出来了。搜索了好多，终于找到原因2012-03-03
下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了用js实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要为大家详细介绍了TypeScript的类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
本文将介绍JavaScript如何实现拼音排序 支持所有主流浏览器+中英文系统2012-11-11
这篇文章主要介绍了js实现日期比较相关天数的方法,需要的朋友可以参考下2014-04-04
js常用排序，整理了，常用的数组互换。2010-12-12
本文给大家分享的是使用javascript结合ajax实现产品页面无刷新加载信息的代码，非常的简单实用，有需要的小伙伴可以参考下。2015-07-07
最新评论