Adding table data to JQuery pages and implementing paging_jquery

Copy code The code is as follows:

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

var starIndex;
var endIndex;

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

// Define line number
var num = 1;

$( document).ready(function() {
// Register the event of adding a user
$("#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 under the table tr object
$tr = $("");
$td1 = $("");
$td2 = $("");
$td3 = $("");
$td4 = $( "");
$td5 = $("");

$tr.append($td1.append( ""));
$tr.append($td2.append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append(""));

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

});
// Register the operation of selecting the number of displayed items
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});

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

});

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

// Handle page turning operation
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);
// Get the start and end index of the display
starIndex = ( nowPag - 1) * pageSize 1;
endIndex = nowPag * pageSize;

if (endIndex > countSize) {
// alert("The index is greater than the total number of records" endIndex);
endIndex = countSize;
}

if (countSize < pageSize) {
// alert("The total number of records is less than the number of displayed items per page" endIndex);
endIndex = countSize;
}

// alert(starIndex);

if (starIndex == endIndex) {
// Displayed 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 operations
$("#show tr:lt(" (starIndex - 1) ")").hide ();
$("#show tr:gt(" (endIndex - 1) ")").hide();
}
// Change the bottom display operation
$("# sizeInfo")
.html(
"Currently from the " starIndex " record to the " endIndex " record, a total of " countSize
" records.");
$("#pageInfo") .html("The current page is " nowPag ", total " countPage "pages.");
};


[html] view plaincopy View the code piece on CODE derived to mine Code piece






< ;meta name="keywords" content="keyword1,keyword2,keyword3">

姓名

性别checked="checked">男value="女">女

年龄

value="添加数据">

全选	姓名	性别	密码	操作

				3 5 10 条
当前从0条到第0条记录.
当前是第0页,共0页.