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:
代号 | 名称 | 操作 |
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
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) { } }); }
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);
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; //最大页数 } }); }
Next, do the php page to query the total number of pages:
strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整
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 += "
After writing this, look at the picture:
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:if(i>=xiao && i<=da) { if (i == page) { s += "
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 classs += "
Then write the method:
//给列表加上点击事件 $(".list").click(function(){ //改变当前页数 //把点击的页数,扔给page(当前页) page = $(this).text(); // page获取了当前页,重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) }
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 += "
Come on, click event on the previous page:
$(".sy").click(function(){ //改变当前页 if(page>1) { //如果不是第一页 page = parseInt(page) - 1; } // page获取了当前页,重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })
s += "
//下一页点击事件 $(".xy").click(function(){ // alert(da); if(page Copy after login
8. Add a conditional query:
Add a text box://给查询加点击事件 $("#chaxun").click(function(){ //重新加载 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })
data:{page:page,name:name}, type:"POST",
data:{name:name}, type:"POST",
$tj = " 1=1 "; if(!empty($_POST["name"])) { $name = $_POST["name"]; $tj = " name like '%{$name}%' "; }
最后在sql语句后面调用就好啦
图:
页面不刷新的分页查询就欧克了;
源码:
显示页面:
查询总页数的页面:
strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整
加载分页信息的页面:
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;
以上就是本篇文章的所有内容了,希望对大家学习有所帮助!
相关推荐:
The above is the detailed content of Ajax writes paging query (without refreshing the page). For more information, please follow other related articles on the PHP Chinese website!