Implementation of pagination using PHP + JQuery + Ajax

In order to exercise JQuery, I decided to write pages by myself

Final Effect

After clicking a letter, all words with the letter as the first letter are displayed below;

Display by page. 15 words are displayed on each page. Each group has 20 pages, ranging from 1 to 20/20 to 40 ~~~

The first is the Pager code in the PHP file.

Copy codeThe Code is as follows: public function searchWordsByInitial ()
{
// Obtain the parameter from the URL sent by AJAX: the user clicks the letter and the page number.
$ Initial = htmlentities ($ _ POST ['initial'], ENT_QUOTES, "UTF-8 ");
$ Page = htmlentities ($ _ POST ['page'], ENT_QUOTES, "UTF-8 ");
$ Words = $ this-> _ createWordObj ();

$ I = 0; // used to display sequence numbers starting from 1
$ PerPageNum = 12; // The number of entries displayed on each page is 12.
$ CurrentPageFirst = ($ page-1) * $ perPageNum + 1;
$ CurrentPageLast = $ page * $ perPageNum;

// Obtain the total number of records
$ SumNum = 0;
Foreach ($ words [$ initial] as $ key => $ word ){
$ SumNum ++;
}

// Obtain the total number of pages
$ PageNums = 0;
If ($ sumNum ){
If ($ sumNum <$ perPageNum) {$ pageNums = 1 ;}// if the total data volume is less than $ PageSize, there is only one page
If ($ sumNum % $ perPageNum) {// retrieve the total data volume divided by the remainder of each page
$ PageNums = (int) ($ sumNum/$ perPageNum) + 1; // if there is a remainder, the number of pages equals to the total data volume divided by the result of each page number and then adds one
} Else {
$ PageNums = $ sumNum/$ perPageNum; // if there is no remainder, the number of pages equals the total data volume divided by the result of each page
}
}
Else {
$ PageNums = 0;
}

// Pager display

Echo $ this-> init_searchWordsByInitial_Pager ($ sumNum, $ pageNums, $ page );

$ Tab_str. = "<table ........................ Here is the specific content of the page .................. "
Return $ tab_str;
}

Copy codeThe Code is as follows: public function init_searchWordsByInitial_Pager ($ sumNum, $ pageNums, $ page)
{
// Obtain the homepage code of the current page group based on the page number clicked by the user. For example, if the user clicks 38, the group is 21-40 and the first page number is 21.
$ Current_first_page = floor ($ page-1)/20) * 20 + 1;

$ Tab_str = "<div id = 'searchwordsbyinitial _ pager' class = 'pagination pagination-centered'> <ul> ";

For ($ k = 0; $ k <= 19; $ k ++)
{
$ J = $ k + $ current_first_page;
$ Tab_str. = "<button class = 'not _ more_btn '>". $ j. "</button> ";
}

$ Tab_str. = "</ul> total <span id = 'sumnums'> ". $ sumNum. "</span> words, <span id = 'pagenums'> ". $ pageNums. "</span> page </div> ";
Return $ tab_str;
}

JQuery Code related to init. js to respond to user actionsCopy codeThe Code is as follows: // initialize Pager

Var pageNums; // the total number of pages.
Var sumNums; // The total number of records.

Function init_searchWordsByInitial_Pager (){

PageNums = $ ("# pageNums" ).html (); // JS get from page HTML
SumNums = $ ("# sumNums" ).html ();
If (pageNums = 1) // if there is only one page, Pager is hidden.
{
$ ("# SearchWordsByInitial_Pager" ).html ("</br> ");
}
// Set the default value of the page number to 1. The first page is displayed by default;
If (page_initial = undefined) {page_initial = 1 ;}

// When there are too many pages, we only display 20 pages in a group, followed by a NEXT button. After clicking this button, we can display the NEXT 20 pages. Similarly, the LAST button can display the first 20 buttons
$ ("# SearchWordsByInitial_Pager ul button: eq (19 )"). after ("<button id = 'more _ forward 'class = 'more'> Next </button> ");
$ ("# SearchWordsByInitial_Pager ul button: eq (0 )"). before ("<button id = 'more _ backword' class = 'more'> Last </button> ");

// If the last group contains fewer than 21 pages, the page after the last page number is hidden, including the NEXT button [pageNums <21]
// If you click the last 20 pages, you must also hide the pages after the last page, including the NEXT button [offset <20]
// (Because clicking page will trigger this initialization function/In fact, you can only bind the call of the initialization function to the click letter event, without binding it with the Ajax action)

Var offset;
Offset = (Math. ceil (pageNums/20) * 20)-parseInt (page_initial );

If (pageNums <21 | offset <20)
{

$ ("# SearchWordsByInitial_Pager ul button"). slice (pageNums % 20) + 1). hide ();

}
// If there are exactly 20 pages, according to the previous Code, offset = 19 <20, the whole Pager will be hidden; you need to display it again
If (search_pageNums = 20)
{
$ ("# SearchWords_Pager ul button. not_more_btn"). show ();
}

// If the first page of the current group is 1, The LAST button is hidden; otherwise, the LAST button is displayed, allowing users to click to flip to the previous group.
If ($ ("# searchWordsByInitial_Pager ul button. not_more_btn" 2.16.eq(02.16.html () = 1)
{
$ ("# SearchWordsByInitial_Pager ul button: eq (0)"). hide ();
}
Else
{
$ ("# SearchWordsByInitial_Pager ul button: eq (0)"). show ();
}
}

// Click NEXT.
$ ("# More_forward"). live ("click", function (event ){

// As long as there is a page flip back, there will be a Last button
$ ("# SearchWordsByInitial_Pager ul button: eq (0)"). show ();

// Add 20 for each page, for example, 1-20 to 21-40.
For (I = 0; I <20; I ++ ){
$ ("# SearchWordsByInitial_Pager ul button. not_more_btn" ).eq( I ).html (parseInt ($ ("# invalid ul button. not_more_btn" ).eq(iyun.html () + 20 );

// Hide the button after the last page number
If ($ ("# searchWordsByInitial_Pager ul button. not_more_btn" ).eq( I ).html () = pageNums)
{
$ ("# SearchWordsByInitial_Pager ul button"). slice (I + 2). hide ();
}

}

})

// Click the LAST button
$ ("# More_backword"). live ("click", function (event ){

// First, display the 20 buttons.
$ ("# SearchWordsByInitial_Pager ul button"). show ();
For (I = 0; I <20; I ++ ){
$ ("# SearchWordsByInitial_Pager ul button. not_more_btn" ).eq( I ).html (parseInt ($ ("# invalid ul button. not_more_btn" ).eq(iyun.html ()-20 );

}

// Determine whether to hide the Last button
If ($ ("# searchWordsByInitial_Pager ul button. not_more_btn" 2.16.eq(02.16.html () = 1)
{
$ ("# SearchWordsByInitial_Pager ul button: eq (0)"). hide ();
}
Else
{
$ ("# SearchWordsByInitial_Pager ul button: eq (0)"). show ();
}

})

// Obtain the letters clicked by the user
$ (". Initial-button-list button"). live ("click", function (event ){
// Clear the active class for all letter A-Z buttons and set the clicked letter button to active; do not use. attr and. removeAttr here;
$ (". Initial-button-list button"). removeClass ("active ");
$ (This). addClass ("active ");

// Obtain the letter and page number of the current click
Initial_value = values (this).html ();
Page_initial = 1;

// The parameter string to be transmitted & action = list_by_initial & initial = O & page_initial = 3
BtnData = "& action = list_by_initial" + "& initial =" + initial_value + "& page =" + page_initial;
$. Ajax ({
Type: "POST ",
Url: processFile,
Data: btnData,
Success: function (data ){
$ ("# Word_table_by_initials"). show ();
$ ("# Word_table_by_initials" ).html ("");
$ ("# Word_table_by_initials" pai.html (data );
Init_searchWordsByInitial_Pager ();

},
Error: function (msg)
{
Alert (msg );
}
});
});

// Retrieve the page number clicked by the user (except for clicking the more button)
$ ("# SearchWordsByInitial_Pager button. not_more_btn"). live ("click", function (event ){
// Clear the active class of all pages and set the page number to active. Do not use. attr or. removeAttr here;
$ ("# SearchWordsByInitial_Pager button"). removeClass ("active ");
$ (This). addClass ("active ");

// Obtain the page number of the current click
Page_initialdomaindetail (thisdomain.html ();

// The parameter string to be transmitted & action = list_by_initial & initial = O & page_initial = 3
BtnData = "& action = list_by_initial" + "& initial =" + initial_value + "& page =" + page_initial;
$. Ajax ({
Type: "POST ",
Url: processFile,
Data: btnData,
Success: function (data ){
$ ("# Word_list_by_initials"). hide ();
$ ("# Word_table_by_initials" ).html ("");
$ ("# Word_table_by_initials" pai.html (data );
Init_searchWordsByInitial_Pager ();

},
Error: function (msg)
{
Alert (msg );
}
});
});
});

Notes:

1, $ ("div button. not_more_bt"), there is a space between the first two selectors, and the last two do not; because the last one is a class selector, it must be directly behind the button

2,.html (). val (). text ()

3,: eq (index),: lt (index); the index in gt (index) starts from 0 and cannot be a variable. It must be a number.

If you want to use dynamic indexes, you can use

Copy codeThe Code is as follows:. eq (I)

4, var a = 20;

Var B = 10;

Var c;

C = a + B;

The result is not 30! It's 2020!

C = parseInt (a) + _ parseInt (B );

Subtraction is okay, but it is best to convert it.

The PHP function is intval ();

5. before writing the code, you must plan the optimal solution. Otherwise, it will be more troublesome to start over.

6. logic sequence of loading JavaScript code and HTML