This article mainly introduced the pure JS write pagination, tabular data for the JSON string, the need for friends can refer to the following
Say nothing, directly on the code: code as follows: <%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> < %@ taglib prefix= "s" uri= "/struts-tags"%> <% string path = Request.getcontextpath (); string base Path = 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 are my page" > <title> pagination </title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "> <script Type= "Text/javascript" > var tabledata = [{"C0": "Linxia State _ Kangle County", "C1": 190893.39, "C2": 24544.65, "area_id": " 930013005 "},{" C0 ":" Linxia State _ Yongjing County "," C1 ": 368900.35," C2 ": 40592.19," area_id ":" 930013006 "},{" C0 ":" Lanzhou East Hillock Branch "," C1 ": 88.48," C2 ": 126.4," area_id ":" 930013106 "},{" C0 ":" Linxia State _ Linxia County "," C1 ": 107337.9," C2 ": 20612.1," area_id ":" 930013008 "},{" C0 ":" Linxia State _ Guanghe County "," C1 ": 69738.07," C2 ": 34894.44," area_id ":" 930013003 "},{" C0 ":" Linxia State _ Hezheng County "," C1 ": 46622.96," C2 ": 20954.97," area_id ": "930013002"},{"C0": "Linxia State _ Dongxiang", "C1": 96021.84, "C2": 16725.63, "area_id": "930013004"},{"C0": "Linxia State _ Linxia Center", "C1" : 1845311.12, "C2": 129478.93, "area_id": "930013001"},{"C0": "Tianshui _ Qinzhou Area", "C1": 0, "C2": 0, "area_id": "930013801"},{"C0": " Linxia State _ Jishishan "," C1 ": 256181.79," C2 ": 15185.98," area_id ":" 930013007 "},{" C0 ":" Jiuquan _ Suzhou Area "," C1 ": 264312," C2 ": 402.6," area_id ":" 930013701 "}]; var columns = [{" CID ":" C0 "," Ctext ":" County "},{" CID ":" C1 "," Ctext ":" Customer Gross income "},{" CID ":" C2 "," Ctext ":" Month transfers cost "}]; /** page: page number pageSize: Number of record bars per page This method, in addition to the page and pageSize, should know that there are three parameters: one, all of the table's data, JSON string format, available by actionQuery database to get. Second, the table header corresponding to the column key and name, is also the JSON string format three, the table corresponding to the id note: This is only for the table header only one line, and written in advance. You can change according to need, the logical way of thinking is this, welcome to criticize correction. */ 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, where the table is assumed to consist of header 1 rows and table body N rows //alert (num); //Clear tbody for ( var i=num-1;i>0;i--) { Ptable.deleterow (i); } var totalnums = tabledata.length;//Total rows var Totalpage = Math.ceil (totalnums/pagesize)//Total pages var begin = (page-1) *pagesize;//page start position (including) var end = page* pagesize;//page ending position (excluding) end = end>totalnums?totalnums:end; //write data to tbody var n = 1;//tbody start line 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; } }&nBsp Raw Ingredient page Toolbar var pagebar = "+page+" page/Total "+totalpage+" page "+" "; if (page>1) { Pagebar + =" <a href= " Javascript:splitpage ("+1+", "+pagesize+"); " > Home </a> "; }else{ Pagebar + +" Home "; } if (page>1) { Pagebar =" <a href= "Javasc Ript:splitpage ("+ (page-1) +", "+pagesize+"); " > Prev </a> "; }else{ pagebar =" prev "; } if (page<totalpage) { Pagebar =" <a hr ef= "Javascript:splitpage (" + (page+1) + "," +pagesize+ ");" > Next </a> "; }else{ pagebar =" Next "; } if (page<totalpage) { Pagebar + =" <a hr ef= "Javascript:splitpage (" + (Totalpage) + "," +pagesize+ ");" > Last </a> "; }else{ pagebar =" Last "; } 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> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
