The paging table data written by pure js is a json string

  • 2020-03-30 01:49:06
  • OfStack

Nothing said, directly on the code:
<%@ 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" ""> 
<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> paging </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript"> 
var tableData = [{"C0":" LinXiaZhou _ kangle ","C1":190893.39,"C2":24544.65,"AREA_ID":"930013005"},{"C0":" LinXiaZhou _ yongjing ","C1":368900.35,"C2":40592.19,"AREA_ID":"930013006"},{"C0":" Lanzhou city _ East post office ","C1":88.48,"C2":126.4,"AREA_ID":"930013106"},{"C0":" LinXiaZhou _ Linxia county ","C1":107337.9,"C2":20612.1,"AREA_ID":"930013008"},{"C0":" LinXiaZhou _ Vitalizing national ","C1":69738.07,"C2":34894.44,"AREA_ID":"930013003"},{"C0":" LinXiaZhou _ hezheng ","C1":46622.96,"C2":20954.97,"AREA_ID":"930013002"},{"C0":" LinXiaZhou _ Dongxiang county ","C1":96021.84,"C2":16725.63,"AREA_ID":"930013004"},{"C0":" LinXiaZhou _ Linxia town centre ","C1":1845311.12,"C2":129478.93,"AREA_ID":"930013001"},{"C0":" tianshui _ The qin state ","C1":0,"C2":0,"AREA_ID":"930013801"},{"C0":" LinXiaZhou _ JiShiShan ","C1":256181.79,"C2":15185.98,"AREA_ID":"930013007"},{"C0":" jiuquan _ The 'state ","C1":264312,"C2":402.6,"AREA_ID":"930013701"}]; 
var columns = [{"cid":"C0","ctext":" county "},{"cid":"C1","ctext":" Total customer revenue "},{"cid":"C2","ctext":" Enter an item of expenditure in the accounts fees for the month "}]; 
function splitPage(page,pageSize){ 
var ptable = document.getElementById("page_table"); 
var num = ptable.rows.length;//Table. Rows returns all the rows contained in the table, assuming that the table consists of the first row and the body N rows
//Remove tbody
for(var i=num-1;i>0;i--){ 
var totalNums = tableData.length;//Total number of rows
var totalPage = Math.ceil(totalNums/pageSize);//Total number of pages
var begin = (page-1)*pageSize;//Page start position (including)
var end = page*pageSize;//End of page position (not included)
end = end>totalNums?totalNums:end; 
//Writes data to the tbody
var n = 1;//The starting line of the 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; 
//Generate the paging toolbar
var pageBar = " The first "+page+" page / A total of "+totalPage+" page "+" "; 
pageBar += "<a href="javascript:splitPage("+1+","+pageSize+");"> Home page </a> "; 
pageBar += " Home page  "; 
pageBar += "<a href="javascript:splitPage("+(page-1)+","+pageSize+");"> The previous page </a> "; 
pageBar += " The previous page  "; 
pageBar += "<a href="javascript:splitPage("+(page+1)+","+pageSize+");"> The next page </a> "; 
pageBar += " The next page  "; 
pageBar += "<a href="javascript:splitPage("+(totalPage)+","+pageSize+");"> back </a> "; 
pageBar += " back  "; 
document.getElementById("page_bar").innerHTML = pageBar; 

<body onload="splitPage(1,3);"> 
<table id="page_table"> 
<div id="page_bar"></div> 

Related articles: