首頁  >  文章  >  web前端  >  純js寫的分頁表格資料為json字串_javascript技巧

純js寫的分頁表格資料為json字串_javascript技巧

WBOY
WBOY原創
2016-05-16 16:59:351492瀏覽

什麼也不說了,直接上程式碼:

複製程式碼 程式碼如下:



字串路徑= request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort () 路徑"/";
%>







;

分頁


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_ID3006" "},{"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"臨夏州_和政縣","C1":46622.96, "C2" 20954. ":"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字串格式,可透過操作查詢資料庫得到。
二、表頭所對應的列的鍵及名稱,也是json字串格式
三、表所對應的id
註:此處只要適合表頭只有一行,首先先寫好情況。你可以根據需要改一下,邏輯思路就是這樣,歡迎批評指正。
*/
function splitPage(page,pageSize){
var ptable = document.getElementById("page_table");
var num = ptable.rows.length;//table.rows は、 table に含まれるすべての行。ここでは、テーブルがヘッダーの 1 行とテーブル本体の N 行で構成されていると仮定します。
//alert(num)//clear 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
の開始行var i=begin;ivar row = ptable.insertRow(n );
var rowData = tableData[i]; length;j ){
var col = columns[j].cid;
var cellData = rowData[col];
cell.innerHTML = cellData ;
}
}
//ページングツールバーを生成
var pageBar = "page" totalPage "page" ";
if(page>1){
pageBar = "< ; a href="javascript:splitPage(" 1 "," pageSize ");">ホームページ ";
}else{
pageBar = "ホームページ";
}
if (page>1){
pageBar = "前のページ
} else{
pageBar = "前のページ";
}
if(pagepageBar = "次のページ ";
}else{
pageBar = "次のページ";
}
if(page< totalPage){
pageBar = "最後のページ ";
}else{
pageBar = "最後のページ"; 🎜>}
document.getElementById("page_bar").innerHTML = pageBar;




/th>
h2


111
222
>

>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn