The addition of table data on the JQuery page and the implementation of pagination _ jquery

Use JQuery to add and pagination table data on the page. For more information, see. The Code is as follows:

Var countPage;
Var nowPag = 1;
Var pageSize;
Var countSize;

Var starIndex;
Var endIndex;

// Information submitted by the user
Var name;
Var sex;
Var age;

// Define the row number
Var num = 1;

$ (Document). ready (function (){
// Register an event for adding a user
$ ("# Submit"). click (function (){
// Obtain 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 in the table
$ 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 that selects the number of displayed items
$ ("# SelectSize"). change (function (){
PageSize = $ ("# selectSize option: selected"). val ();
PageNation ();
});

// Register the button click event for the paging operation
$ ("# First"). click (pageNation );
$ ("# Back"). click (pageNation );
$ ("# Next"). click (pageNation );
$ ("# Last"). click (pageNation );

});

// Paging Functions
Var pageNation = function (){
// Obtain the number of all data entries
CountSize = $ ("# show tr"). size ();
// Obtain the total number of pages
CountPage = Math. ceil (countSize/pageSize );

// Handle page flip operations
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 );
// Obtain the subscript of the start and end of the display.
StarIndex = (nowPag-1) * pageSize + 1;
EndIndex = nowPag * pageSize;

If (endIndex> countSize ){
// Alert ("subscript greater than the total number of records" + endIndex );
EndIndex = countSize;
}

If (countSize <pageSize ){
// Alert ("the total number of records is smaller than the number of entries displayed on each page" + endIndex );
EndIndex = countSize;
}

// Alert (starIndex );

If (starIndex = endIndex ){
// Displayed operation
$ ("# Show tr: eq (" + (starIndex-1) + ")"). show ();
$ ("# Show tr: lt (" + (starIndex-1) + ")"). hide ();
} Else {
// Displayed 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 display at the bottom
$ ("# SizeInfo ")
. Html (
"From" + starIndex + "to" + endIndex + ", total" + countSize
+ "Records .");
$ ("# PageInfo" ).html ("current" + nowPag + "Page, total" + countPage + "page .");
};


[Html] view plaincopy view CODE snippets derived from my CODE snippets on CODE




Implement with jquery