本文主要介绍了Ajax写分页查询(实现不刷新页面)的实例,具有很好的参考和学习ajax的价值,下面跟着小编一起来看下Ajax写分页查询(实现不刷新页面)吧
要求:
获取数据库中大量的信息显示在页面上,必然要使用到分页查询;
若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好,
所以最好使用Ajax的方法写分页查询;
1.先来找一张数据很多的表吧!
一张简单的表
代码,引入jquery包:
<script src="jquery-1.11.2.min.js"></script>
写一张表格,显示我们的代号跟名称:
1 2 3 4 5 6 7 8 9 10 11 |
|
这些都很简单,没毛病!
2.设一个当前页,定义一个变量为1(第一页):
1 2 |
|
3.下面来写第一个方法:需要用ajax,这个方法主要起查询,且分页的作用:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据,用到limit:
1 2 3 4 5 6 7 8 9 10 11 |
|
做完了第一步,来看看图:
显示数据实现!
好的,每页先是三条数据已经实现了,(页面变成这样我用了美化网页的Bookstrap,前面有讲到)
5.显示分页信息,写一个方法,先用ajax先获取总页数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
接下来做查询总页数的php页面:
1 2 3 4 5 6 7 8 9 |
|
好啦,总页数获取到了,回来把分页写完吧:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
这样写完了以后,来看图:
分页的信息也显示出来了
6.来把默认选中页数的背景色来改变一下吧
看一下Bookstrap;改背景色的方法吧:
很显然是多了一个active的样式,我们用判断给加上吧
1 2 3 4 5 6 7 |
|
好了,看一下:
可以,没毛病
7.做页数的点击事件,实现点击页数跳转到该页数并显示数据,还要更新列表;
先给数字列表加上一个class
s += " <li class='active list'><a>" + i + "</a></li>"
然后写方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
当我点击第五页:
没毛病;
8.再来就是上一页和下一页的点击事件了,首先是上一页的点击事件:
首先在上一页的列表里加上class,便于写事件:
s += "<li class='sy'><a>«</a></li>";
来,上一页点击事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
下一页的点击事件:
同上:列表里加上class,便于写事件:
s += "<li class='xy'><a>»</a></li>";
下一页点击事件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
好,完美实现ajax分页查询;
8.再加一个按条件查询:
加上文本框:
1 2 3 4 |
|
来写点击事件:
1 2 3 4 5 6 7 8 9 |
|
接下来我们需要改一下这两个方法:
ajax只需要把文本框的name传过去就好啦:
1 2 |
|
1 2 |
|
在处理页面,设置一个恒等的条件:
1 2 3 4 5 6 |
|
最后在sql语句后面调用就好啦
图:
页面不刷新的分页查询就欧克了;
源码:
显示页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 |
|
查询总页数的页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
加载分页信息的页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
以上就是本篇文章的所有内容了,希望对大家学习有所帮助!
相关推荐:
Atas ialah kandungan terperinci Ajax写分页查询(实现不刷新页面). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!