首頁 > 開發者 > JavaScript

純js寫的分頁表格式資料為json串

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

純js寫的分頁表格式資料為json串

 這篇文章主要介紹了純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> 

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More