PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)


Posted in PHP onSeptember 17, 2017

1.首先做主页面Ajax_pag.php

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ajax做分页</title>
    <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
    <script src="Ajax_pag.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
  </head>
  <style>
    .header{
      margin-top: 20px;
    }
  </style>
  <body>
    <div >
      关键字:
      <input id="key" type="text" name="gjz"/>
      <input type="button" value="查询" id="ck" />
      
    </div>
    <table class="table table-bordered header">
      <thead>
        <tr>
          <th>地区代号</th>
          <th>地区名称</th>
          <th>父级代号</th>
        </tr>
      </thead>
      <tbody id="list">

      </tbody>
    </table>

    <div >
      <ul class="pagination" id="fenye">

      </ul>
    </div>

    </body> 
</html>

2.然后做分页查询JS页面Ajax_pag.js

代码如下:

//ajax分页开始
    var ts = 10;//每页显示的条数
    var page = 1;//当前页
    $(document).ready(function(e) {
      //页面加载数据
      Load();
      //加载分页列表
      Loadlist();
      $("#ck").click(function(){    
    //页面加载数据
    Load();
    //加载分页列表
    Loadlist();    
  })
})        
    
    //加载数据的方法
    function Load(){  
      var gjz = $("#key").val();
        $.ajax({
            async:false,
            url:"pagechuli.php",
            data:{page:page,ts:ts,gjz:gjz},//page是显示的页数;ts是显示的条数
            type:"POST",
            dataType:"JSON",               
            success: function(data){                             
                  var str ="";            
                  for(var k in data)
                  {
                  str +="<tr><td>"+data[k][0]+"</td><td>"+data[k][1]+"</td><td>"+data[k][2]+"</td></tr>";
                  }
                  $("#list").html(str);//把拼接好的字符串放到要显示的thody里面                          
                }
              })
            }  
    //加载分页列表      
    function Loadlist(){
      var str ="";    
      //上一页
      str+="<li><a id='prev'>«</a></li>";
      //加载列表
      for(var i=page-4;i<page+5;i++){
        //限制条件
        if(i>0 && i<=zys()){
        //判断当前页
        if(i==page){  
          str+= "<li class='active'><a>"+i+"</a></li>";  
      }else{
      str+= "<li><a class='item'>"+i+"</a></li>";
      }
    }    
  }
      //下一页
      str+="<li><a id='next'>»</a></li>";
      $("#fenye").html(str);
      
      $("#prev").click(function(){
        if(page>1){
          page--;          
        }
        //页面加载数据
        Load();
        //加载分页列表
        Loadlist();
      })
      
      $(".item").click(function(){
        var p = $(this).text();//取到的是字符串,转化为整数
        page = parseInt(p);
        //页面加载数据
        Load();
        //加载分页列表
        Loadlist();
      })
      
      $("#next").click(function(){
        if(page<zys()){
          page++;
        }
        //页面加载数据
        Load();
        //加载分页列表
        Loadlist();
      })
      
    }
  
  
  
  
  //总页数
  function zys(){
    var zys = 0;
    $.ajax({
      async:false,
      url:"zyschuli.php",
      dataType:"TEXT",
      success:function(data){
        zys = Math.ceil(data/ts);
      }
    });
    return zys;
  }

3.最后做分页查询处理页面pagechuli.php

代码如下:

<?php
$gjz = $_POST["gjz"];
$page = $_POST["page"];//获取页数显示值
$ts = $_POST["ts"];//获取每页条数显示值

require_once "./DBDA.class.php";
$db = new DBDA();

$tj = " 1=1 ";
if(!empty($_POST["gjz"])){
  $gjz = $_POST["gjz"];
  $tj = " areaname like '%{$gjz}%' or areacode like '%{$gjz}%' or parentareacode like '%{$gjz}%' ";
}

$tg = ($page-1)*$ts;//每页显示$ts条数据,这里显示的就是当前页的$tg条数据。
$sql = "select * from chinastates where {$tj} limit {$tg},{$ts}";
echo $db->JsonQuery($sql,0)

小插件:总页数的处理页面zyschuli.php

<?php
require_once "./DBDA.class.php";
$db = new DBDA();

$sql = "select count(*) from chinastates";
echo $db->StrQuery($sql,0);

效果如图:PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

关键字查询:

PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

以上这篇PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
MySql中正则表达式的使用方法描述
Jul 30 PHP
php执行sql语句的写法
Mar 10 PHP
php使HTML标签自动补全闭合函数代码
Oct 04 PHP
php 生成唯一id的几种解决方法
Mar 08 PHP
关于php支持分块与断点续传文件下载功能代码
May 09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
Jun 26 PHP
php实现最简单的MVC框架实例教程
Sep 08 PHP
使用PHP实现生成HTML静态页面
Nov 18 PHP
PHP+MySQL实现无极限分类栏目的方法
Dec 23 PHP
php解析xml 的四种简单方法(附实例)
Jul 11 PHP
如何让PHP编码更加好看利于阅读
May 12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
Mar 26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
Sep 16 #PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
Sep 16 #PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
Sep 16 #PHP
PHP环形链表实现方法示例
Sep 15 #PHP
PHP实现的链式队列结构示例
Sep 15 #PHP
PHP基于堆栈实现的高级计算器功能示例
Sep 15 #PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
Sep 15 #PHP
You might like
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python内置类型性能分析过程实例
2020/01/29 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
总经理职责范文
2013/11/08 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
七年级数学教学反思
2014/01/22 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
运动会入场词60字
2014/02/15 职场文书
给校长的建议书400字
2014/05/15 职场文书
星级党支部申报材料
2014/05/31 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
为Centos安装指定版本的Docker
2022/04/01 Servers
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技