Ajax paging query details, ajax paging details

Ajax paging query details, ajax paging details

(1) Write a page that displays data first. What are the parts required for querying by page?

1. The first step is to enter the query text box and the query button, so start to write the code.

<Div> <input type = "text" id = "key"/> // enter the query text box <input type = "button" value = "query" id = "chaxun "/> // query button, the name is used to add an event to this button later, because the content of the text box can be queried only after you click it. </div>

See the following results:

 

2. The next step is to display the data. to display the data, you must query the database and use the ajax method.

First, introduce the jQuery package to the page that displays data.

<Script src = "../jquery-1.11.2.min.js"> </script> // introduce jQuery's package

Write the content of the column you want to display. Naturally, you have to write a table, write a row, and put the field name of the expected content in the cell in the row (three types of information are displayed here)

<Table width = "50%" border = "1" cellpadding = "0" cellspacing = "0"> <tr> <br> // field name displayed, this is the content of the first line <td> Code </td> <td> name </td> <td> parent Code </td> </tr> <tbody id = "bg> <br> // you can find the database content. </tbody> </table>

You have not checked the database yet, but you can check the result first:

 

3. Now you can check the database. ajax is required here.

3.1 but since it is to be displayed by page, there will be a default first page, you can set a variable first

Var page = 1; // current page

3.2 then we started to write ajax and query the database. But this is often used to avoid writing it many times. We can write a method.

Function Load () {var key = $ ("# key "). val (); // query condition: Because query $ is used. ajax ({url: "fenye_chuli.php", // display the data processing page data: {page: page, key: key}, // The value type must be set for both pages and queries: "POST", dataType: "JSON", // here we use the JSON data format success: function (data) {// write code after the processing page is executed }});}

3.3 write the processing page of the displayed data again. Here, we need to consider how many data entries are skipped and how many data entries are to be displayed.

<? Phpinclude ("DBDA. class. php "); // call the encapsulated class $ db = new DBDA (); // create a new object $ page =$ _ POST [" page "]; // number of pages for transferring values $ key = $ _ POST ["key"]; // key <br> $ num = 20; // The number of data entries to be displayed on each page $ tiao = ($ page-1) * $ num; // display how many data entries are skipped. // The fuzzy query name in the query table is a keyword and how many entries are skipped on the page, how many data entries are displayed $ SQL = "select * from chinastates where areaname like '% {$ key} %' limit {$ tiao}, {$ num }"; // execute the SQL statement echo $ db-> JSONQuery ($ SQL); // call the processing method of the written JSON Data Format

The JSON data format is associated with an array. Therefore, you need to encapsulate the processing method into a class.

The processing method is written in dataType (Data Format)-text and json in AJAX.

3.4 after processing the page, write the code after executing the processing page in ajax (Note: The above uses the JSON data format, so note that the field name should be the same as that in the database, also, it is associated with an array)

Success: function (data) {var str = ""; for (var k in data) {<br> // The code, name, and parent code displayed cyclically. str + = "<tr> <td>" + data [k]. areaCode + "</td> <td>" + data [k]. areaName + "</td> <td>" + data [k]. parentAreaCode + "</td> </tr>" ;}$ ("# bg" ).html (str); // enlarge the content to display the data}

In this way, the data to be displayed is put into bg. Remember to call this method.

At this point, data is displayed, but pagination is not possible. Therefore, pagination is required. Here, a number is needed, but traversal is also required. You can leave it empty at will.

<Div id = "xinxi"> // display numbers or previous pages </div>

3.5 this can also be written as a method and then called

To know the maximum number of pages displayed, you can define a default maximum number, which can also be the maximum number of pages displayed when you search for keywords.

var maxys = 1;

Locate the keyword Value

var key = $("#key").val();

Then I wrote ajax to check the total number of pages.

$. Ajax ({async: false, // because this is to be executed synchronously, the value is false url: "fenye_zys.php", // processing page data: {key: key }, // type of the value to be uploaded: "POST", // dataType: "TEXT", // success: function (d) can be used as a TEXT string) {// The statement after the processing page ends }});

Next is the page for processing the write processing information.

<? Phpinclude ("DBDA. class. php "); // call the encapsulated class $ db = new DBDA (); $ key = $ _ POST [" key "]; // pass the value $ num = 20; // The default number of items displayed $ SQL = "select count (*) from chinastates where areaname like '% {$ key} %' "; // query the total number of entries by keyword $ zts = $ db-> StrQuery ($ SQL ); echo ceil ($ zts/$ num); // convert to an integer

After the processing page is executed, You need to submit the maximum number of pages to the default maximum number of pages.

Success: function (d) {maxys = d; // submit the execution result to the defined maximum number of pages}

In this way, you need to have "Previous Page" and "next page". The number in the middle allows him to display 5 entries each time.

Str + = "<span> total:" + maxys + "page </span>"; str + = "<span id = 'prev'> previous page </span> "; // click the event to be used later. In the current page of this name // loop, str + = "<span id = 'Next'> next page </span> "; // This is also the name of the click event.

And then write the number of pages in the loop.

For (var I = page-2; I <page + 3; I ++) // two {if (I> = minys & I <= maxys) // The number of pages must be in a range, greater than the minimum number of pages, and smaller than the maximum number of pages {if (I = page) {str + = "<span class = 'hangzhou' bs = '" + I + "'>" + I + "</span> "; // selected on the current page} else {str + = "<span class = 'LIST' bs = '" + I + "'>" + I + "</span> "; // display the current page }}}

Transfer the value to the xinxi of the div.

$("#xinxi").html(str);

The final result is shown as follows:

Next, click events on the previous and next pages. First, click events on the previous page.

// Add a click event to the previous page $ ("# prev "). click (function () {page = page-1; // the current page minus 1 if (page <1) {page = 1;} Load (); // load the data LoadXinXi (); // load the page information })

Next, click the next page.

// Add a click event to the next page $ ("# next "). click (function () {page = page + 1; // Add 1 if (page> maxys) {page = maxys;} Load (); // load the data LoadXinXi (); // load the page information })

Add a click event to the number of loops

// Add an event to the intermediate list $ (". list "). click (function () {page = parseInt ($ (this ). attr ("bs"); Load (); // Load data LoadXinXi (); // Load paging information })

You can call it all at the end.

4. Keyword query. Here we want to add click events for the query.

("# Chaxun"). click (function () {page = 1; Load (); // Load data LoadXinXi (); // Load paging information })

The overall display:

In this way, the paging query is complete, and the page is displayed without refreshing the page.

(1) display by PAGE

(2) query display

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!