javascript

The tabular data of JQuery page is added with the realization of pagination


var countPage;
var nowPag = 1;
var pageSize;
var countSize;

var starIndex;
var endIndex;

//User submitted information
var name;
var sex;
var age;

//Define a line number
var num = 1;

$(document).ready(function() {
//Register the add user event
$("#submit").click(function() {
//Get the information submitted by the user
name = $("#name").val();
sex = $("input[name='sex']:checked").val();
age = $("#age").val();
pageSize = $("#selectSize option:selected").val();
// alert(name+sex+age+pageSize);

//Create the tr object under the table
$tr = $("<tr class='data' ></tr>");
$td1 = $("<td></td>");
$td2 = $("<td></td>");
$td3 = $("<td></td>");
$td4 = $("<td></td>");
$td5 = $("<td></td>");

$tr.append($td1.append("<input type='checkbox'>"));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append("<input type='button' value=' delete '>"));

$("#show").append($tr);
pageNation();

});
//Register to select the number of display bars
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});

//Register button click events for paging operations
$("#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("#last").click(pageNation);

});

//Functions for paging operations
var pageNation = function() {
//Gets the number of all data bars
countSize = $("#show tr").size();
//Get total pages
countPage = Math.ceil(countSize / pageSize);

//Handles page turns
if (this.nodeType == 1) {
var idValue = $(this).attr("id");
if ("first" == 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 index that shows the start and end
starIndex = (nowPag - 1) * pageSize + 1;
endIndex = nowPag * pageSize;

if (endIndex > countSize) {
//Alert (" index > total number of records "+endIndex);
endIndex = countSize;
}

if (countSize < pageSize) {
//Alert (" the total number of records is smaller than the number of bars per page "+endIndex);
endIndex = countSize;
}

// alert(starIndex);

if (starIndex == endIndex) {
//Display operation
$("#show tr:eq(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
} else {
//Display operation
$("#show tr:gt(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (endIndex - 1) + ")").show();

//Hidden operation
$("#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 article " + endIndex + " records , A total of " + countSize
+ " records .");
$("#pageInfo").html(" The current is the first " + nowPag + " page , A total of " + countPage + " page .");
};


[html] view plaincopy in CODE View the code slice on derive to my code slice

<!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 {
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> The 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> age <input type="text" id="age" value="21"></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"> Future generations </th>
<th> The name </th>
<th> gender </th>
<th> password </th>
<th> operation </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 page " id="first"></td>
<td><input type="button" value=" The previous page " id="back"></td>
<td><input type="button" value=" The next page " id="next"></td>
<td><input type="button" value=" At the end of the page " id="last"></td>
<td><select id="selectSize">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select> article </td>
</tr>
<tr align="center">
<td colspan="6"><span id="sizeInfo"> The current from 0 To the first article 0 records .</span></td>
</tr>
<tr align="center">
<td colspan="6"><span id="pageInfo"> The current is the first 0 page , A total of 0 page .</span></td>
</tr>
</table>

</div>
</div>


</form>
</div>
</body>
</html>