纯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 相关文章推荐
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
js日历功能对象
2012/01/12 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
不要用强制方法杀掉python线程
2017/02/26 Python
机器学习10大经典算法详解
2017/12/07 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
python MD5加密的示例
2020/10/19 Python
体育教学随笔感言
2014/02/24 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
班级学习计划书
2014/04/27 职场文书
酒会邀请函
2015/01/31 职场文书
自主招生英文自荐信
2015/03/25 职场文书
创业计划书之干洗店
2019/09/10 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android