萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 純js寫的分頁表格數據為json串

純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>     
copyright © 萬盛學電腦網 all rights reserved