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 相关文章推荐
PHP HTML代码串 截取实现代码
Jun 29 PHP
php购物网站支付paypal使用方法
Nov 28 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
May 02 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
Jun 06 PHP
thinkphp3.2.2前后台公用类架构问题分析
Nov 25 PHP
php实现mysql事务处理的方法
Dec 25 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
Mar 15 PHP
浅析PHP中的闭包和匿名函数
Dec 25 PHP
PHP+jQuery实现双击修改table表格功能示例
Feb 21 PHP
解决windows上php xdebug 无法调试的问题
Feb 19 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
Mar 24 PHP
PHP获取当前时间不准确问题解决方案
Aug 14 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 程序员应该使用的10个组件
2009/10/31 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python聊天程序实例代码分享
2013/11/18 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python3.x实现base64加密和解密
2019/03/28 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
python Timer 类使用介绍
2020/12/28 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
物流业务员岗位职责
2014/02/08 职场文书
投资意向书
2014/07/30 职场文书
公司授权委托书范本
2014/09/18 职场文书
会计工作总结范文2014
2014/12/23 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Mysql忘记密码解决方法
2022/02/12 MySQL
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python
Linux安装Docker详细教程
2022/07/07 Servers