ajax分页

既然是分页查询，那么就要有张数据很多的表，可以让它进行分页显示，用普通的方法进行分页查询必然是要刷新页面的，这里要实现不刷新页面进行分页显示数据，就要用到ajax方式。进行编写代码

1.首先是查询的文本框输入，还有查询按钮

在这里我用的bootstrap里面的按钮

1 <div>名称：<input type="text" id="name" />
2 <button type="button" class="btn btn-primary btn-sm" id="chaxun">查询</button>
3 </div>

2.接下来就是显示数据了，显示数据必然是要查数据库了，就要用到ajax的方法

先将jQuery的包引入这个显示数据的页面

1 <script src="jquery-3.2.0.js"></script>//引入jquery包

写表格

 1 <table class="table table-striped">
 2   <thead>
 3     <tr>
 4       <th>代号</th>
 5       <th>民族</th>
 6     </tr>
 7   </thead>
 8   <tbody id="shuju">
 9   
10   </tbody>
11 </table>

3.现在可以先来查数据库了，这里就要用到ajax了

（1）不过既然是要分页显示，那么会有个默认的第一页，可以先定个变量，显示数据并且将要加载东西写成方法。

 1 //选取当前页
 2 var page=1;
 3 
 4 //每页的条数
 5 var num=5;
 6 
 7 //加载数据
 8 Load();
 9 
10 //加载分页列表
11 LoadFenYe();

（2）下面主要写详细的加载方法首先加载数据

 1 //加载数据的方法
 2 function Load()
 3 {
 4     var name = $("#name").val();
 5     $.ajax({
 6         url:"fychuli.php",
 7         data:{page:page,num:num,name:name},
 8         type:"POST",
 9         dataType:"JSON",//这里用json数组返回
10         success: function(data){
11             var str="";
12             for(var k in data)
13             {
14                 str=str+"<tr><td>"+data[k].biaohao+"</td><td>"+data[k].minzu+"</td></tr>"    
15             }
16             $("#shuju").html(str);    
17         }    
18     })
19         
20 }

（3）加载分页列表的信息

 1 //加载分页列表的方法
 2 function LoadFenYe()
 3 {
 4     //储存所有分页信息的代码
 5     var s="";
 6     var name = $("#name").val();
 7     //加载上一页
 8     s = "<li><a id='prev'>&laquo;</a></li>";
 9     
10     //加载列表
11     var zts = 0;
12     $.ajax({
13         async:false,
14         data:{name:name},
15         type:"POST",
16         url:"zongtiaoshu.php",
17         dataType:"TEXT",
18         success: function(data){
19             zts = data;
20         }
21 
22     });
23     
24     //求总页数
25     var zys = Math.ceil(zts/num);
26     //为了防止出错
27     page = parseInt(page);
28     for( var i=page-2;i<page+3;i++)
29     {
30         if(i>0 && i<=zys)
31         {
32             if(i==page)
33             {
34                 s = s+"<li class='active'><a ys='"+i+"' class='dangqian'>"+i+"</a></li>";
35             }
36             else
37             {
38                 s = s+"<li><a ys='"+i+"' class='list'>"+i+"</a></li>";
39             }
40             
41         }
42     }
43     
44     //加载下一页
45     s = s+"<li><a id='next'>&raquo;</a></li>";
46     
47     $("#xinxi").html(s);
48     
49     //给上一页加事件
50     $("#prev").click(function(){
51         page = parseInt(page);
52         if(page>1)
53         {page--;}
54         
55         //重新加载数据
56         Load();
57         //重新加载分页信息
58         LoadFenYe();
59     })
60     //给下一页加事件
61     $("#next").click(function(){
62         page = parseInt(page);
63         if(page<zys)
64         {page++;}
65         
66         //重新加载数据
67         Load();
68         //重新加载分页信息
69         LoadFenYe();
70     })
71     
72     //给列表加事件
73     $(".list").click(function(){
74         page = parseInt($(this).attr("ys"));
75         //重新加载数据
76         Load();
77         //重新加载分页信息
78         LoadFenYe();
79     })
80 }

在上面我也将点击事件也加上了因为点击事件需要在选取页数后重新加载加在外面不行

（4）给查询加点击事件

1 $("#chaxun").click(function(){
2     //重新加载数据
3     Load();
4     //重新加载分页信息
5     LoadFenYe();
6 })

下面就是效果