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 按时间段查询数据方法(实例说明)
Nov 02 PHP
在PHP中设置、使用、删除Cookie的解决方法
May 06 PHP
显示程序执行时间php函数代码
Aug 29 PHP
PHP中使用CURL模拟登录并获取数据实例
Jul 01 PHP
php编写的抽奖程序中奖概率算法
May 14 PHP
CodeIgniter中使用Smarty3基本配置
Jun 29 PHP
php需登录的文件上传管理系统
Mar 21 PHP
PHP文件缓存smarty模板应用实例分析
Feb 26 PHP
php实现在站点里面添加邮件发送的功能
Apr 28 PHP
PHP第三方登录―QQ登录实现方法
Feb 06 PHP
PHP中关键字interface和implements详解
Jun 14 PHP
PHP异常处理定义与使用方法分析
Jul 25 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
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python阶乘求和的代码详解
2020/02/14 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
行政部主管岗位职责
2013/12/28 职场文书
法定代表人授权委托书
2014/04/04 职场文书
审计专业自荐信范文
2014/04/21 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
优秀班组事迹材料
2014/12/24 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android