純js寫的分頁(yè)表格數(shù)據(jù)為json串
更新時(shí)間:2014年02月18日 16:34:11 作者:
這篇文章主要介紹了純js寫的分頁(yè),表格數(shù)據(jù)為json串,需要的朋友可以參考下
什么也不說(shuō)了,直接上代碼:
<%@ 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>
復(fù)制代碼 代碼如下:
<%@ 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>
您可能感興趣的文章:
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- js表格分頁(yè)實(shí)現(xiàn)代碼
- angularjs表格分頁(yè)功能詳解
- 基于Vue.js的表格分頁(yè)組件
- vue.js表格分頁(yè)示例
- vue.js 表格分頁(yè)ajax 異步加載數(shù)據(jù)
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能
- Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
- 基于JavaScript實(shí)現(xiàn)表格滾動(dòng)分頁(yè)
- JS基于封裝函數(shù)實(shí)現(xiàn)的表格分頁(yè)完整示例
相關(guān)文章
laydate只顯示時(shí)分 不顯示秒的功能實(shí)現(xiàn)方法
今天小編就為大家分享一篇laydate只顯示時(shí)分 不顯示秒的功能實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09一文搞懂JavaScript如何實(shí)現(xiàn)圖片懶加載
圖片懶加載,往往作為減少首頁(yè)白屏?xí)r間的一個(gè)解決方案而出現(xiàn)。本文將通過(guò)示例帶大家一起探究一下JavaScript是如何實(shí)現(xiàn)圖片懶加載的,感興趣的可以了解一下2022-06-06js 獲取html5的data屬性實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼
用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼...2007-04-04JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng)
防抖和節(jié)流嚴(yán)格算起來(lái)應(yīng)該屬于性能優(yōu)化的知識(shí),但實(shí)際上遇到的頻率相當(dāng)高,處理不當(dāng)或者放任不管就容易引起瀏覽器卡死,下面這篇文章主要給大家介紹了關(guān)于JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng),需要的朋友可以參考下2022-03-03Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02GoJs節(jié)點(diǎn)繪圖模板之go.Node使用示例詳解
這篇文章主要為大家介紹了GoJs節(jié)點(diǎn)繪圖模板go.Node使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04