首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

- Author -

WORSHIP亚萨

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
利用文件属性结合Session实现在线人数统计
Oct 09 PHP
php循环语句 for()与foreach()用法区别介绍
Sep 05 PHP
Linux下CoreSeek及PHP扩展模块的安装
Sep 23 PHP
深入php var_dump()函数的详解
Jun 05 PHP
深入PHP magic quotes的详解
Jun 17 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
Jun 28 PHP
destoon整合UCenter图文教程
Jun 21 PHP
php获取一个变量的名字的方法
Sep 05 PHP
CentOS6.5 编译安装lnmp环境
Dec 21 PHP
php中数据库连接方式pdo和mysqli对比分析
Feb 25 PHP
php操作MongoDB类实例
Jun 17 PHP
Joomla开启SEF的方法
May 04 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
decorator(1) 网页解析(1) 查找算法(1) bs4(1) 循环(3) translation(2) 装饰器(1) 读取(1) 分块(1) 二维数组(2)
You might like
在任意字符集下正常显示网页的方法二（续）
2007/04/01 PHP
php实现登录页面的简单实例
2019/09/29 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
python进阶教程之函数对象（函数也是对象）
2014/08/30 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
Python 性能优化技巧总结
2016/11/01 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python中return的返回和执行实例
2019/12/24 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python实现拼接图片
2020/03/23 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
婚假请假条怎么写
2014/04/10 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
经典导游欢迎词
2015/01/26 职场文书
淮海战役观后感
2015/06/11 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书