Ajax writes paging queries (without refreshing new pages) and refreshes the page with ajax

Ajax writes paging queries (without refreshing new pages) and refreshes the page with ajax

Requirements:

Retrieving a large amount of information in the database is displayed on the page, which must be queried by page;

If Ajax is not used, but other methods are used, the page must be refreshed. the user's health check is poor,

Therefore, it is best to use Ajax to write paging queries;

1. First, find a table with a lot of data!

A simple table

Code to introduce the jquery package:

<script src="jquery-1.11.2.min.js"></script>

Write a table to display our code and name:

<Table class = "table-striped"> <thead> <tr> <td> Code </td> <td> name </td> <td> operation </td> </tr> </thead> <tbody id = "td"> </tbody> </table>

These are all very simple. No problem!

2. Set a current page and define a variable as 1 (first page ):

Var page = 1; // the current page. The default value is 1.

3. Write the first method below: ajax is required. This method is mainly used for querying and paging:

Function load () {$. ajax ({url: "jiazai. php ", // display all the data. Do not write data: {page: page}. // remember to upload the data type:" POST ", dataType:" TEXT ", success: function (data ){}});}

4. Write the processing page of the displayed data. Here, you need to consider how many data entries are skipped and how many data entries are to be displayed. Use limit:

<? Phpinclude ("db. class. php "); $ db = new db (); $ page = $ _ POST [" page "]; // go to the current page $ num = 3; // display several items on each page $ tg = ($ page-1) * 3; // skip several items $ SQL = "select * from min limit {$ tg }, {$ num} "; // limit: two parameters. The first parameter is the number of skipped items, and the second parameter is the number of echo $ db-> Query ($ SQL) records );

After completing the first step, let's see the figure:

Display Data Implementation!

Okay. Three pieces of data have been created for each page. (The page becomes the bookdetail for beautifying the page. As mentioned above)

5. Display paging information. Write a method to obtain the total number of pages first with ajax:

Function loadfenye () {var s = ""; // used to receive var xiao = 1; // maximum page var da = 1; // minimum page $. ajax ({async: false, // synchronous url: "zys. php ", dataType:" TEXT ", success: function (data) {da = data; // maximum number of pages }});}

Next, we will query the php page with the total number of pages:

<? Php // query the total number of pages include ("db. class. php "); $ db = new db (); $ SQL =" select count (*) from min "; $ zts = $ db-> strquery ($ SQL ); // total number of records echo ceil ($ zts/3); // ceil rounded up

Okay, the total number of pages has been obtained. come back and finish the page:

// Method for loading paging information function loadfenye () {var s = ""; // used to receive var xiao = 1; // maximum page var da = 1; // minimum page $. ajax ({async: false, // synchronous url: "zys. php ", dataType:" TEXT ", success: function (data) {da = data; // maximum number of pages. the maximum number of pages found is the default maximum number of pages }}); // load the Previous page s + = "<li> <a> «</a> </li>"; // load the page list for (I = page-4; I <page + 5; I ++) {// I indicates the number of pages in the list if (I >= xiao & I <= da) {s + = "<li> <a>" + I + "</a> </li>" }}// load the next page s + = "<li> <>» </a> </li> "; $ ("# fenye" ).html (s );}

After this is done, let's look at the figure:

The page information is displayed.

6. Change the background color of the selected page number by default.

Let's take a look at bookbench; how to change the background color:

Obviously there is an extra active style. Let's add it to your judgment.

if(i>=xiao && i<=da) {  if (i == page) {   s += " <li class='active'><a>" + i + "</a></li>"  }  else {   s += " <li><a>" + i + "</a></li>";  }

Let's take a look:

Yes. No problem

7. Click the page number to jump to the page number, display data, and update the list;

Add a class to the number list

s += " <li class='active list'><a>" + i + "</a></li>"

Then write the method:

// Add a click event to the list $ (". list "). click (function () {// change the current page number // throw the page number to page (current page) = $ (this ). text (); // page gets the current page, reload the following method // call the load method load (); // encapsulate the loaded data into a method loadfenye (); // Method for loading paging information })}

When I click Page 5:

No fault;

8. Click events on the previous and next pages. First, click events on the previous page:

First, add a class to the list of previous pages to facilitate event writing:

s += "<li class='sy'><a>«</a></li>";

Click Event on the previous page:

$ (". Sy "). click (function () {// change the current page if (page> 1) {// if not the first page = parseInt (page)-1 ;} // page gets the current page and reloads the following method // call the load method load (); // encapsulate the loaded data into a method loadfenye (); // Method for loading paging information })

Click events on the next page:

Same as above: class is added to the List to facilitate event writing:

s += "<li class='xy'><a>»</a></li>"; 

Next page Click Event:

// Next page Click Event $ (". xy "). click (function () {// alert (da); if (page <da) {// if it is not the first page = parseInt (page) + 1 ;} // page gets the current page and reloads the following method // call the load method load (); // encapsulate the loaded data into a method loadfenye (); // Method for loading paging information })

Good. ajax paging query is perfect;

8. Add a conditional query:

Add the text box:

<Div> <input type = "text" id = "name"/> <input type = "button" id = "chaxun" value = "query"/> </div>

To write click events:

// Add a click event to the query $ ("# chaxun "). click (function () {// reload // call the load method load (); // encapsulate the loaded data into a method loadfenye (); // load the paging information method })

Next, we need to change these two methods:

Ajax only needs to pass the name of the text box over:

data:{page:page,name:name},   type:"POST", 

data:{name:name}, type:"POST",

On the processing page, set a constant condition:

$tj = " 1=1 ";if(!empty($_POST["name"])){ $name = $_POST["name"]; $tj = " name like '%{$name}%' ";}

Finally, you can call the SQL statement later.

Figure:

If the page is not refreshed, You can query it by page;

Source code:

Display page:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title> <link href =" dist/css/bootstrap.min.css "rel =" external nofollow "rel =" stylesheet "type = "text/css"/> <script src = "jquery-1.11.2.min.js"> </script> <script src = "dist/js/bootstrap. min. js "> </script> <style type =" text/css ">. xq {margin-left: 5px ;}# fenye li: hover {cursor: pointer ;}</style> 
Page for querying the total number of pages:
<? Php // query the total number of pages include ("db. class. php"); $ db = new db (); $ tj = "1 = 1"; if (! Empty ($ _ POST ["name"]) {$ name = $ _ POST ["name"]; $ tj = "name like '% {$ name} %'";} $ SQL = "select count (*) from min WHERE {$ tj }"; $ zts = $ db-> strquery ($ SQL); // The total number of echo ceil ($ zts/3); // The ceil is rounded up.
Page for loading paging information:
<? Phpinclude ("db. class. php "); $ db = new db (); $ page = $ _ POST [" page "]; // go to the current page $ tj =" 1 = 1 "; if (! Empty ($ _ POST ["name"]) {$ name = $ _ POST ["name"]; $ tj = "name like '% {$ name} %'" ;}$ num = 3; // display several items on each page $ tg = ($ page-1) * 3; // skip several $ SQL = "select * from min where {$ tj} limit {$ tg}, {$ num}"; // limit: two parameters, the first is how many records are skipped, and the second is how many records are taken. $ arr = $ db-> Query ($ SQL); // traverse $ str = ""; foreach ($ arr as $ v) {$ str = $ str. implode ("-", $ v ). "|"; // use-to combine $ v. The combination is 1-red, 2-blue, separated by |, the combination is 1-red | 2-Blue |} $ str = substr ($ str, 0, strlen ($ str)-1); // capture the string: capture the length of the string-1 // strlen to obtain the string length echo $ str;
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!