var countpage;
var nowpag = 1;
var pageSize;
var countsize;
var Starindex;
var endindex;
User Submission Information
var name;
var sex;
var age;
Define line number
var num = 1;
$ (document). Ready (function () {
Registering an event to add a user
$ ("#submit"). Click (function () {
Get information submitted by user
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
$TR = $ ("<tr class= ' data ' ></tr>");
$TD 1 = $ ("<td></td>");
$TD 2 = $ ("<td></td>");
$TD 3 = $ ("<td></td>");
$TD 4 = $ ("<td></td>");
$TD 5 = $ ("<td></td>");
$tr. Append ($td 1.append ("<input type= ' checkbox ' >"));
$tr. Append ($td 2.append (name));
$tr. Append ($td 3.append (Sex));
$tr. Append ($td 4.append (age));
$tr. Append ($td 5.append ("<input type= ' button ' value= ' delete ' >"));
$ ("#show"). Append ($TR);
Pagenation ();
});
Register to select an action to display the number of bars
$ ("#selectSize"). Change (function () {
PageSize = $ ("#selectSize option:selected"). Val ();
Pagenation ();
});
button click event to register paging operation
$ ("#first"). Click (pagenation);
$ ("#back"). Click (pagenation);
$ ("#next"). Click (pagenation);
$ ("#last"). Click (pagenation);
});
Functions for paging operations
var pagenation = function () {
Get all the number of data bars
Countsize = $ ("#show tr"). Size ();
Get Total Pages
Countpage = Math.ceil (countsize/pagesize);
Action to handle paging
if (This.nodetype = = 1) {
var idvalue = $ (this). attr ("id");
if ("a" = Idvalue) {
alert (idvalue);
Nowpag = 1;
else if ("back" = Idvalue) {
alert (NOWPAG);
if (Nowpag > 1) {
nowpag--;
}
else if ("Next" = Idvalue) {
alert (idvalue);
if (Nowpag < countpage) {
nowpag++;
}
else if ("last" = Idvalue) {
alert (idvalue);
Nowpag = Countpage;
}
}
alert (pageSize);
Gets the subscript that shows the start and end
Starindex = (nowPag-1) * pageSize + 1;
Endindex = Nowpag * pageSize;
if (Endindex > Countsize) {
Alert ("Subscript is greater than total record number" +endindex);
Endindex = countsize;
}
if (Countsize < pageSize) {
Alert ("Total records smaller than the number of display bars per page" +endindex);
Endindex = countsize;
}
alert (Starindex);
if (Starindex = = Endindex) {
Actions displayed
$ ("#show Tr:eq (" + (starIndex-1) + ")"). Show ();
$ ("#show tr:lt (" + (starIndex-1) + ")"). Hide ();
} else {
Actions displayed
$ ("#show tr:gt (" + (starIndex-1) + ")"). Show ();
$ ("#show tr:lt (" + (endIndex-1) + ")"). Show ();
Hidden actions
$ ("#show tr:lt (" + (starIndex-1) + ")"). Hide ();
$ ("#show tr:gt (" + (endIndex-1) + ")"). Hide ();
}
Change the bottom display operation
$ ("#sizeInfo")
. HTML (
"The current from" + Starindex + "to the first" + Endindex + "record, total" + countsize
+ "record.");
$ ("#pageInfo"). HTML ("currently is the first" + Nowpag + "page, total" + countpage + "page.");
};
[HTML] View plaincopy on code to see a snippet derived from my Code slice
<! DOCTYPE html>
<title> with jquery implementation </title>
<meta name= "keywords" content= "keyword1,keyword2,keyword3" >
<meta name= "description" content= "This are 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 {
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>
<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> gender <input type= "Radio" name= "Sex" value= "male"
checked= "Checked" > Male <input type= "Radio" name= "Sex"
Value= "female" > Female
</td>
</tr>
<tr>
<td> ages <input type= "text" id= "Age" value= "></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" > Full selection </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= "previous page" 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> Bar </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 pages .</span></td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
