use jquery to implement page table data additions and pagination, as shown below, like friends can refer to the following
Code as follows: var countpage; var nowpag = 1; var pagesize; var countsize; var starindex; var endindex; //user submitted information var name; var sex; var age; //Definition line number var num = 1;&nb Sp $ (document). Ready (function () { //Register Add user event $ ("#submit"). Click (function () { //Get user submitted information NAME = $ ("#name"). Val (); sex = $ ("Input[name= ' Sex ']:checked"). Val (); age = $ ("#age"). Val (); PageSize = $ ("#selectSize option:selected"). Val (); //alert (name+sex+age+pagesize); //Create a TR object under the table & nbsp $TR = $ ("<tr class= ' data ' ></tr>"); $td 1 = $ ("<td></td>"); $TD 2 = $ ("<td></ Td> "); $td 3 = $ (" <td></td> "); $TD 4 = $ (" <td></td> "); $td 5 = $ (" <td>& Lt;/td> "); $tr. Append ($td 1.append (" <input type= ' checkbox ' > ')); $tr. Append ($td 2.append ( Name); $tr. Append ($td 3.append (Sex)); &nbSp $tr. Append ($td 4.append (age)); $tr. Append ($td 5.append ("<input type= ' button ' value= ' delete ' >")); $ ("#show"). Append ($tr); pagenation (); }); //Registration Select display number of operations $ ("#selectSize"). Change (function () { pageSize = $ ("#selectSize option:selected"). Val (); pagenation (); }); //Registration button click event $ ("#first"). Click (pagenation); $ ("#back"). Click (pagenation); $ ("#next"). Click (pagenation); $ ("#last"). Click (pagenation); }); //paging operation function var pagenation = function () { //Get all data bars Countsize = $ ("#show tr"). Size (); //Get total pages Countpage = Math.ceil (Countsi ze/pagesize); //Handle paging operation if (This.nodetype = 1) { var idvalue = $ (this). attr ("id"); if ( ' A ' = idvalue { //alert (idvalue); Nowpag = 1; } else if ("back" = idvalue) { //alert (NOWP AG); if (Nowpag > 1) { nowpag--; }   else if ("Next" = Idvalue) { //alert (Idvalue); if (Nowpag < countpage) { nowpag++; else if ("last" = = Idvalue) { //alert (idvalue); Nowpag = countpage; } } //alert (p agesize); //Get subscript showing start and end Starindex = (nowPag-1) * pageSize + 1; endindex = Nowpag * pagesize; & nbsp if (Endindex > Countsize) { //Alert ("Subscript is greater than total record number" +endindex); endindex = countsize; } if (c Ountsize < PageSize) { //Alert ("Total records small number of display bars per page" +endindex); endindex = countsize; } /A Lert (starindex); if (Starindex = = endindex) { //Display operation $ ("#show Tr:eq (" + (starIndex-1) + ")"). Show (); $ ("#show tr:lt (" + (starIndex-1) +) "). Hide (); } else { //display $ (" #show tr:gt ("+ St arIndex-1) + ")". Show (); $ ("#show tr:lt (" + (endIndex-1) +) "). Show (); //Hidden actions $ (" #show TR : LT ("+ (STArIndex-1) + ")". Hide (); $ ("#show tr:gt (" + (endIndex-1) +) "). Hide (); } //Change bottom display operations $ (" #size Info ") . HTML ( " from + Starindex + "to" + Endindex + "), total" + countsize + "record. $ ("#pageInfo"). HTML ("currently is the first" + Nowpag + "page, a total of" + countpage + "page."); }; [HTML] view plaincopy on code to see how it is derived to my Code piece <! DOCTYPE html> <html> <head> <title> with jquery implementation </title> < Meta name= "keywords" content= "keyword1,keyword2,keyword3" > <meta name= "description" content= "This is my Page "> <meta name=" Content-type "content=" text/html; Charset=utf-8 "> <script type=" Text/javascript "src=". /js/jquery-2.0.3.min.js "></script> <!--<link rel=" stylesheet "type=" Text/css "href=". Styles.css ">--> <style type=" text/css "> div { border:1px Black solid; } #tableDiv { Height:500px; } #insertDiv { width:300px; margin-right:550px; } #tableDiv {&N Bsp width:500px; margin-left:350px; } #top { width:500px; height:400px; } #topTable, #contentTable, #bottomTable { width:450px; } </style> < Script type= "Text/javascript" src= ". /js/jquerytablepagenation.js "></script> </head> <body> <div id=" Content "align=" center "> <form action=" "> <div id=" Insertdiv "style=" WIDTH:263PX; "> <table id=" InsertData "border=" 1px "> <tr> <td> name <input type=" text "id=" Name "value=" Donghogyu "></td> </tr> <tr> <td> sex <input type=" Radio " Name= "Sex" value= "men" checked= "checked" > Male <input type= "Radio" name= "Sex" value= "women" > Women </ td> </tr> <tr> <td> <input type= "text" id= "Age" value= "a" ></td> </tr > <tr> <td align= "center" ><input type= "button" id= "Submit" value= "Add Data" ></ td> </tr> </table> </div> <div id= "Tablediv" > <div Id= "Top" > <table id= "toptable" border= "1px" > <thead> <th><input type = "checkbox" > select all </th> <th> name </th> <th> sex </th> <th> password </ th> <th> Operations </th> </thead> <tbody id= "show" > </ tbody> </table> </div> <div id= "Bottom" > <table id= " Bottomtable "border=" 1px "> <tr align=" center "> <td><input type=" button "value=" Home "id=" First "></td> <td><input type=" button "value=" prev "id=" Back "></td> <td><input type= "button" value= "next page" id= "Next" ></td> <td>< Input type= "button" value= "End" id= "last" ></td> <td><select id= "Selectsize" > < Option value= "3" >3</option> <option value= "5" >5</option> <option value= "Ten" > 10</option> </select> article </td> </tr> <tr align= "center" > <TD colspan= "6" ><span id= "Sizeinfo" > Current from 0 to No. 0 record .</span></td> </tr> <tr align = "Center" > <td colspan= "6" ><span id= "PageInfo" > Current is No. 0 page, Total 0 page .</span></td> < /tr> </table> </div> </div> </form> < /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
