介绍 & lt; html>
& lt; head>
& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=utf-8",/比;
& lt; title>无标题文档& lt;/title>
& lt; link 类型=拔谋?css", rel=皊tylesheet", href=? ./bootstrap-3.3.7-dist/css/bootstrap.min.css", rel=癳xternal nofollow",/比;
& lt; script src=? ./jquery-3.2.0.min.js"祝辞& lt;/script>
& lt; script src=? ./bootstrap-3.3.7-dist/js/bootstrap.min.js"祝辞& lt;/script>
& lt; style 类型=拔谋?css"比;
.list:{徘徊,光标:指针}
#上一页:{徘徊,光标:指针}
#下一个:悬停{,光标:指针}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=皃age-header"祝辞
& lt; h2> AJAX分页& lt;/h2>
& lt;/div>
& lt; div>名称:& lt; input 类型=皌ext", id=皀ame",/祝辞,,& lt; button 类型=癰utton",类=癰tn btn-info btn-xs", id=癱haxun"在查询& lt;/button> & lt;/div>
& lt; br /比;
& lt; table 宽度=?00%”,类=皌able table-hover"比;
,& lt; tr>
& lt;才能td>代号& lt;/td>
& lt;才能td>名称& lt;/td>
,& lt;/tr>
,
,& lt; tbody id=皊huju"比;
,,
,& lt;/tbody>
,
& lt;/table>
& lt; br /比;
& lt; ul 类=皃agination", id=皒inxi"祝辞& lt;/ul>
& lt;/body>
& lt; script 类型=拔谋?javascript"比;//代表当前页
var page =, 1;//每页显示几条
var num =, 5;//加载数据
Load ();//加载分页列表
LoadFenYe ();//加载数据的方法
function 负载()
{
美元,var name =, (“# name") .val ();
,. ajax({美元
url:才能“chuli.php",
数据:才能{页:页面,num: num,名称:名称},
类型:才能“POST",
数据类型:才能“JSON",
,,成功:功能(数据){
,,var str =,““
,,(var k 拷贝数据)
,,{
,,,str =, str +,“& lt; tr> & lt; td>“+数据[k] .code +“& lt;/td> & lt; td>“+数据[k] .nno +“& lt;/td> & lt;/tr>“;
,,}
,,美元(“# shuju") . html (str);
,,},
,});
}//加载分页信息
function LoadFenYe ()
{
,//存储所有分页信息的代码
,var s =,““
美元,var name =, (“# name") .val ();
,//加载上一页=,s “& lt; li> & lt; a id=& # 39; prev # 39;祝辞,laquo; & lt;/a> & lt;/li>“;
,
,//加载列的表
,var zts =, 0;
,. ajax({美元
异步:假的,才能
数据:才能{名称:名称},
类型:才能“POST",
url:才能“zongtiaoshu.php",
数据类型:才能“TEXT",
,,成功:功能(数据){
,,zts =,数据;
,,}
,});
,
,//求总页数
,var zys =, Math.ceil (zt型/num);
,//为了防止出的错=,page 方法(页面);
,(i=第2页,var i<页+ 3,我+ +)
,{
如果才能(i> 0,,,, i<=zy)
{才能
,,如果页面(i==)
,,{
,,,s =, s +“& lt; li 类=& # 39;活跃# 39;祝辞& lt; a y=& # 39;“+我+“& # 39;,类=& # 39;dangqian& # 39;在“+我+“& lt;/a> & lt;/li>“;
,,}
其他的,,
,,{
,,,s =, s +“& lt; li> & lt; a y=& # 39;“+我+“& # 39;,类=& # 39;列表# 39;在“+我+“& lt;/a> & lt;/li>“;
,,}
,,
,,}
,}
,
,//加载下一页
,s =, s +“& lt; li> & lt; a id=& # 39;未来# 39;祝辞,raquo; & lt;/a> & lt;/li>“;
,
,$ (“# xinxi") . html(年代);
,
,//给上一页加事件
,$ (“# prev") .click(函数(){
时间=page 才能;方法(页面);
如果(page> 1)才能
{页面,才能}
,,//重才能新加载数据
负载才能();//重才能新加载分页信息
LoadFenYe才能();
,})
,//给下一页加事件
,$ (“# next") .click(函数(){
时间=page 才能;方法(页面);
如果(page
小编给大家分享一下ajax如何实现分页查询功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
ajax分页查询功能的具体代码,具体内容如下
显示的效果如下:
实现效果的代码如下:fenye
1.。php
