This article mainly introduces an example of writing a paging query in Ajax (without refreshing the page). It has a good reference and value for learning ajax. Let’s follow the editor to take a look at writing a paging query in Ajax (without refreshing the page).

Requirements:

#To obtain a large amount of information in the database and display it on the page, paging queries must be used;

If you don’t use Ajax, but use other methods, you will definitely need to refresh the page, and the user health check will be very bad.

So it is best to use the Ajax method to write paging queries;

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

A simple table

Code, introduce jquery package:

Write a table showing our codename and name:

   代号  名称  操作

Copy after login

These are very simple and there is nothing wrong with them!

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

var page = 1; //当前页，默认等于1

Copy after login

3. Let’s write the first method: you need to use ajax. This method is mainly used for query and paging:

function load() { $.ajax({ url: "jiazai.php", // 显示所有的数据不用写data data:{page:page}, //当前页记得传过去 type:"POST", dataType: "TEXT", success: function (data) { } }); }

Copy after login

4. Write the processing page for displaying data; what you need to consider here is how many pieces of data you want to skip and how many pieces of data you want to display. Use limit:

Query($sql);

Copy after login

After completing the first step, let’s take a look at the picture:

Display data implementation!

Okay, three pieces of data on each page have been implemented. (I used Bookstrap to beautify the webpage to make the page look like this, as mentioned earlier)

5. Display paging information , write a method, first use ajax to get the total number of pages:

function loadfenye() { var s = ""; //用于接收 var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大页数 } }); }

Copy after login

Next, do the php page to query the total number of pages:

strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整

Copy after login

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

//加载分页信息方法 function loadfenye() { var s = ""; //用于接收 var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大页数，查到的最大页数交个默认的最大页数 } }); //加载上一页 s += "«
"; // 加载分页列表 for(i=page-4;i=xiao && i<=da) { s += " "+i+"
" } } // 加载下一页 s += "»
"; $("#fenye").html(s); }

Copy after login

After writing this, look at the picture:

##The paging information is also displayed

6. Let’s change the number of pages selected by default Let’s change the background color

Take a look at Bookstrap; how to change the background color:

Obviously there is an additional active style , let’s add it using judgment

if(i>=xiao && i<=da) { if (i == page) { s += " " + i + "
" } else { s += " " + i + "
"; }

Copy after login

Okay, let’s take a look:

Okay, No problem

7. Create a click event for the page number, jump to the page number and display the data when clicking the page number, and update the list;

Give it first Number list plus a class

s += "

" + i + "

Then write the method:

//给列表加上点击事件 $(".list").click(function(){ //改变当前页数 //把点击的页数，扔给page（当前页） page = $(this).text(); // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) }

Copy after login

When I click on the fifth page:

Nothing wrong;

8. Next is the click event on the previous page and the next page. The first is the click event on the previous page:

First, add class to the list on the previous page to facilitate writing events:

s += "

«< /li>";

Come on, click event on the previous page:

$(".sy").click(function(){ //改变当前页 if(page>1) { //如果不是第一页 page = parseInt(page) - 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })

Copy after login

Click event on the next page:

Same as above: Add class to the list to facilitate writing events:

s += "

»< /li>";

Next page click event:

//下一页点击事件 $(".xy").click(function(){ // alert(da); if(page
         
          Copy after login

Okay, perfect implementation of ajax paging query;

8. Add a conditional query:

Add a text box:

Copy after login

To write the click event:

//给查询加点击事件 $("#chaxun").click(function(){ //重新加载 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })

Copy after login

Next we need to change these two methods:

ajax just needs to pass the name of the text box:

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

Copy after login

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

Copy after login

On the processing page, set an equality condition:

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

Copy after login

最后在sql语句后面调用就好啦

图：

页面不刷新的分页查询就欧克了；

源码：

显示页面：

无标题文档

显示数据

代号	名称	操作

Copy after login

查询总页数的页面：

          strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整

Copy after login

加载分页信息的页面：

          Query($sql); //遍历 $str=""; foreach ($arr as $v) { $str = $str.implode("-",$v)."|"; //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝| } $str = substr($str,0,strlen($str)-1); //截取字符串：从第0个开始，截取它的长度-1 //strlen获取字符串长度 echo $str;

Copy after login

以上就是本篇文章的所有内容了，希望对大家学习有所帮助！