纯js写的分页表格数据为json串


Posted in Javascript onFebruary 18, 2014

什么也不说了,直接上代码:

<%@ 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>
Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
倒记时60刷新网页的js代码
Feb 18 #Javascript
JS替换文本域内的回车示例
Feb 18 #Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 #Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 #Javascript
如何将网页表格内容导入excel
Feb 18 #Javascript
js charAt的使用示例
Feb 18 #Javascript
jQuery 回车事件enter使用示例
Feb 18 #Javascript
You might like
ADODB类使用
2006/11/25 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
django缓存配置的几种方法详解
2018/07/16 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
联想C++笔试题
2012/06/13 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
小学教师寄语大全
2014/04/03 职场文书
体育节口号
2014/06/19 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
公司安全管理制度范本
2015/08/05 职场文书