The increase of table data in jquery page and the realization of paging

Source: Internet
Author: User

  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--; }  &nbsp 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>     
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.