• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ajax实现分页查询功能

    ajax分页查询功能的具体代码,供大家参考,具体内容如下

    显示的效果如下:

    实现效果的代码如下:

    1.fenye.php

    html>
    head>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    title>无标题文档/title>
    link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" />
    script src="../jquery-3.2.0.min.js">/script>
    script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js">/script>
    
    style type="text/css">
    
    .list:hover{ cursor:pointer}
    #prev:hover{ cursor:pointer}
    #next:hover{ cursor:pointer}
    
    /style>
    /head>
    
    body>
    div class="page-header">
    h1>AJAX分页/h1>
    /div>
    
    div>名称:input type="text" id="name" />nbsp;button type="button" class="btn btn-info btn-xs" id="chaxun">查询/button>/div>
    br />
    table width="100%" class="table table-hover">
    
     tr>
      td>代号/td>
      td>名称/td>
     /tr>
     
     tbody id="shuju">
      
     /tbody>
     
    /table>
    
    br />
    ul class="pagination" id="xinxi">/ul>
    
    /body>
    script type="text/javascript">
    //代表当前页
    var page = 1;
    //每页显示几条
    var num = 5;
    
    //加载数据
    Load();
    
    //加载分页列表
    LoadFenYe();
    
    //加载数据的方法
    function Load()
    {
     var name = $("#name").val();
     $.ajax({
      url:"chuli.php",
      data:{page:page,num:num,name:name},
      type:"POST",
      dataType:"JSON",
      success: function(data){
       var str = "";
       for(var k in data)
       {
        str = str + "tr>td>"+data[k].code+"/td>td>"+data[k].nno+"/td>/tr>";
       }
       $("#shuju").html(str);
      } 
     });
    }
    
    //加载分页信息
    function LoadFenYe()
    {
     //存储所有分页信息的代码
     var s = "";
     var name = $("#name").val();
     //加载上一页
     s = "li>a id='prev'>laquo;/a>/li>";
     
     //加载列表
     var zts = 0;
     $.ajax({
      async:false,
      data:{name:name},
      type:"POST",
      url:"zongtiaoshu.php",
      dataType:"TEXT",
      success: function(data){
       zts = data;
      }
    
     });
     
     //求总页数
     var zys = Math.ceil(zts/num);
     //为了防止出错
     page = parseInt(page);
     for( var i=page-2;ipage+3;i++)
     {
      if(i>0  i=zys)
      {
       if(i==page)
       {
        s = s+"li class='active'>a ys='"+i+"' class='dangqian'>"+i+"/a>/li>";
       }
       else
       {
        s = s+"li>a ys='"+i+"' class='list'>"+i+"/a>/li>";
       }
       
      }
     }
     
     //加载下一页
     s = s+"li>a id='next'>raquo;/a>/li>";
     
     $("#xinxi").html(s);
     
     //给上一页加事件
     $("#prev").click(function(){
      page = parseInt(page);
      if(page>1)
      {page--;}
      
      //重新加载数据
      Load();
      //重新加载分页信息
      LoadFenYe();
     })
     //给下一页加事件
     $("#next").click(function(){
      page = parseInt(page);
      if(pagezys)
      {page++;}
      
      //重新加载数据
      Load();
      //重新加载分页信息
      LoadFenYe();
     })
     
     //给列表加事件
     $(".list").click(function(){
      page = parseInt($(this).attr("ys"));
      //重新加载数据
      Load();
      //重新加载分页信息
      LoadFenYe();
     })
    }
    
    $("#chaxun").click(function(){
     //重新加载数据
     Load();
     //重新加载分页信息
     LoadFenYe();
    })
    
    
    /script>
    /html>
    
    

    2.chuli.php

    ?php
    $page = $_POST["page"];
    $num = $_POST["num"];
    $name = $_POST["name"];
    
    require "../DBDA.class.php";
    
    $db = new DBDA();
    
    $tguo = ($page-1)*$num;
    
    $sql = "select * from nation where nno like '%{$name}%' limit {$tguo},{$num}";
    
    echo $db->jsonquery($sql);
    
    

    3.zongtiaoshu.php

    ?php
    $name = $_POST["name"];
    require"../DBDA.class.php";
    $db = new DBDA();
    $sql ="select count(*) from nation where nno like '%{$name}%'";
    echo $db->strquery($sql);
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
    • ajax分页查询详解
    • ajax实现分页和分页查询
    • Ajax写分页查询(实现不刷新页面)
    • ajax实现数据分页查询
    • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能
    • ajax的分页查询示例(不刷新页面)
    • JQuery+Ajax实现数据查询、排序和分页功能
    • Ajax案例集下载:新增分页查询案例(包括《Ajax开发精要》中的两个综合案例) 下载
    上一篇:ajax实现加载数据功能
    下一篇:关于ajax的使用方法_例题、ajax的数据处理
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    ajax实现分页查询功能 ajax,实现,分页,查询功能,