ajax分页练习
Posted 黑山大胖子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax分页练习相关的知识，希望对你有一定的参考价值。
用ajax方式实现数据的分页显示，
数据库为chinastates
AreaCode 地区代号，AreaName 地区名称，ParentAreaCode父级代号
网页一共三页
1.主页
<!--这里是a-fenye.php，是分页显示的主页，用来显示数据内容--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="../js/jquery-3.3.1.min.js"></script><!--引用jQuery--> <script src="../js/bootstrap.min.js"></script><!--引用bootstrap包--> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"><!--引用bootstrap包--> </head> <body> <!--搜索栏开始--> <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" id="sstj"> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="ss">搜索</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div> <!--搜索栏结束--> <!--数据列表开始--> <table class="table table-bordered"> <caption>中国地区</caption> <thead> <tr> <th>地区代号</th> <th>地区名称</th> <th>父级代号</th> </tr> </thead> <tbody id="nr"><!--数据内容载体--> </tbody> </table> <!--数据列表结束--> <!--索引栏开始--> <ul class="pagination" style="width:400px; height:50px; margin-left:500px" id="plist"><!--索引栏的载体--> <!-- <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> 以上是引入的索引栏格式 --> </ul> <!--索引栏结束--> </body> <script type="text/javascript"> var pcount = 13; //pcount表示每一页显示的数据条数 var page = 1; //表示当前页数 jiaZai(); //执行方法jiaZai()和jzList() jzList(); /* *用来加载网页里的数据内容 */ function jiaZai(){ var sstj = $("#sstj").val(); //sstj代表用户输入的查询条件 $.ajax({ url:"a-fenye-chuli.php", //处理页面为a-fenye-chuli.php data:{page:page,pcount:pcount,sstj:sstj}, //传输的数据为当前页数，每页是数据条数，查询条件 type:"post", //提交方式为post dataType:"JSON", //返回的数据格式是JSON格式 success: function(e){ //回调函数用于显示刷新内容 var str = ""; //空字符串str for(var k in e){ //遍历JSON，把JSON内的数据以表格形式显示，并累加str str += "<tr><td>"+e[k].AreaCode+"</td><td>"+e[k].AreaName+"</td><td>"+e[k].ParentAreaCode+"</td></tr>"; } $("#nr").html(str); //将最终得到的str作为HTML代码赋予数据内容的载体中 } }) } /* *用来加载索引列 */ function jzList(){ var str = ""; //空字符串str var zdy = zuiDaYe(); //zdy代表最大页数 str += "<li id=\'qian\'><a>«</a></li>"; //向前的箭头 for(var i=page-2;i<page;i++){ //表示当前页之前的两页 if(i>0) str += "<li class=\' plist\'><a>"+i+"</a></li>" ; } str += "<li class=\'active plist\'><a>"+page+"</a></li>"; //代表当前页 for(var i=page;i<page+2;i++){ //代表当前页之后两页 var p = i+1; if(p<=zdy) str += "<li class=\' plist\'><a>"+p+"</a></li>"; } str += "<li id=\'hou\'><a>»</a></li>"; //代表向后的箭头 $("#plist").html(str); //最终累加的str作为HTML代码赋予到索引栏中 jiaShiJian(); //给每一个索引添加事件 } /* *给每一个索引添加事件 */ function jiaShiJian(){ var zdy = zuiDaYe(); //zdy代表最大页数 $("#qian").click(function(){ //向前的箭头添加的点击事件为当前页数减一并重新加载数据内容和索引栏 if(page>1){ page--; jiaZai(); jzList(); }else{ alert("已经是第一页！"); //如果当前页是第一页则弹出提示 } }) $("#hou").click(function(){ //向后的箭头添加的点击事件为当前页数加一并重新加载数据内容和索引栏 if(page<zdy){ page++; jiaZai(); jzList(); }else{ alert("已经是最后一页！"); //如果当前页是最后一页则弹出提示 } }) $(".plist").click(function(){ //点击索引事件为当前页等于点击的索引值然后重新加载数据内容和索引栏 page = parseInt($(this).text()); jiaZai(); jzList(); }) } $("#ss").click(function(){ //点击搜索按钮的事件，当前页归一并重新加载数据和索引栏 page = 1; jiaZai(); jzList(); }) /* *用来取最大页数 *@return 返回最大页数 */ function zuiDaYe(){ var zts; //zts代表数据总条数 var sstj = $("#sstj").val(); //sstj代表用户输入的查询条件 $.ajax({ type:"post", //数据传输方式为post data:{sstj:sstj}, //传输的数据为用户输入的查询条件 dataType:"text", //传回的数据格式为text url:"a-fenye-zts.php", //处理页面为a-fenye-zts.php async:false, //非异步刷新 success: function(e){ //回调函数取出总条数值 zts = parseInt(e); } }) //向上取整总条数除以每页数据条数的值并返回 return Math.ceil(zts/pcount); } </script> </html>
2.处理页面一
<?php //这里是a-fenye-chuli.php，是主页a-fenye.php中加载数据内容方法里ajax的处理页面 require_once("../DBDA.class.php"); $db = new DBDA(); $page = $_POST["page"]; //取出传输过来的值 $pcount = $_POST["pcount"]; $sstj = $_POST["sstj"]; $tj = " 1=1 "; //设一个恒成立的条件tj if(!empty($sstj)){ //判断传输过来的查询条件sstj是否非空 $tj = " areaname like \'%{$sstj}%\' "; //非空则把tj修改为SQL语句模糊查询的条件的书写格式 } $tg = ($page-1)*$pcount; //tg表示跳过的数据条数，计算方法为当前页减一再乘以每页的数据条数 $sql = "select * from chinastates where {$tj} limit {$tg},{$pcount}"; //完成SQL语句，这是一个分页查询语句 echo $db->jsonquery($sql); //用返回JSON数据的方法执行SQL语句并输出返回
3.处理页面二
<?php //这里是a-fenye-zts.php，是主页a-fenye.php中zuiDaYe()方法中ajax的处理页面 require_once("../DBDA.class.php"); $db = new DBDA(); $sstj = $_POST["sstj"]; //用sstj接收查询条件 $tj = " 1=1 "; //tj是一个恒成立的条件 if(!empty($sstj)){ //判断sstj是否非空 $tj = " areaname like \'%{$sstj}%\' "; //非空则把tj修改为SQL语句模糊查询的条件的书写格式 } $sql = "select count(*) from chinastates where {$tj}"; //完成SQL语句，这是一个数据条数查询 echo $db->strquery($sql); //返回总条数
主要思路是控制page来实现分页和跳转效果，通过对page的操作还可以添加其他的功能，如跳转到具体页。
以上是关于ajax分页练习的主要内容，如果未能解决你的问题，请参考以下文章