Home > Article > Web Front-end > Ajax implementation of non-refresh paging example code

Ajax implementation of non-refresh paging example code

韦小宝Original: 2018-01-01 18:18:171053browse

This article mainly introduces the Ajax implementation of non-refresh paging example code. It is very good and has reference value. Friends who are interested in ajax can refer to the article Ajax implementation of non-refresh paging example code.

implementation Ajax paging:

Add query conditions if possible

Find a table for paging
Do not use page for paging Class
The page does not need to be refreshed
Ajax loading data

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>
<body>
<p>
  <input type="text" id="key" />
  <input type="button" value="查询" id="chaxun" />
</p>
<table width="50%" border="1" bordercolordark="0" bordercolorlight="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>父级代号</td>
  </tr>
  <tbody id="neirong"><!--显示内容-->
  </tbody>
</table>
<p id="fenyexinxi">
</p>
</body>
<script type="text/javascript">
  var page = 1;//定个变量，当前要显示的页
  Load();//加载数据
  Loadfenyexinxi();//加载分页信息
  //查询
  $("#chaxun").click(function(){
    page = 1;
    Load();//加载数据
    Loadfenyexinxi();//加载分页信息
  })
  function Load()
  {
    var key = $("#key").val();//查询条件。用户输入的内容
    $.ajax({
      url:"chuli.php",
      data: {
      page: page,
      key: key
    },//传2个参数一当前页2关键字也就是查询条件
      type:"POST",
      dataType:"JSON",
      success: function(data){//匿名函数
          var str = "";//这个将来要放表格显示的
          for(var k in data)//通过K可以获得每一条数据
          {//加载数据完成
            str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号
          }
          $("#neirong").html(str);
      }
    });
  }
function Loadfenyexinxi()//分页信息
{
  var str = "";
  var minys = 1;//最小页数
  var maxys = 1;//最大页数
  var key = $("#key").val();//取关键字用于传到zys页面用
  $.ajax({
    async:false,
    type:"POST",
    url:"fenye.php",
    data:{key:key},
    dataType:"TEXT",
    success:function(d){
        maxys = d;
    }
  });
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39;>总共："+maxys+"页</span> ";
  str += "<span id=&#39;prev&#39; style=&#39;text-decoration:underline; cursor:pointer&#39;>上一页</span>";
  for(var i=page-2;i<page+3;i++)
  {
    if(i>=minys && i<=maxys)
    {
      if(i==page)
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
      else
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
    }
  }
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; id=&#39;next&#39;>下一页</span>";
  $("#fenyexinxi").html(str);
  $("#prev").click(function(){
      page = page-1;
      if(page<1)
      {
        page=1;
      }
      Load();
      Loadfenyexinxi();
    })
  $("#next").click(function(){
      page = page+1;
      if(page>maxys)
      {
        page=maxys;
      }
      Load();
      Loadfenyexinxi();
    })
  $(".list").click(function(){
      page = parseInt($(this).attr("bs"));
      Load();
      Loadfenyexinxi();
    })
}
</script>
</html>

The above is this page: test.php

<?php
include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件，关键字
$num = 20;//定义，一页里多少条数据，
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiaoshu},{$num}";//根据关键字查like &#39;%{$tiaojian}%&#39;。
echo $db->JSONQuery($sql);

The above is the processing page: chuli.php:

<?php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like &#39;%{$key}%&#39;";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);

The above is the paging page: fenye.php

The following is our display effect:

#As you click on the next page, 5 pages will be displayed below, and there are two pages on the left and right of the current page. The number of information displayed on each page can be adjusted by yourself.

Enter keywords in the text box above to display relevant information. This is the paging we do using ajax.

The above is the example code of Ajax implementation without refresh paging introduced by the editor. I hope it will be helpful to everyone! !

Related recommendations:

Detailed explanation of data parameter type examples of jQuery.Ajax()

How to use jquery's ajax to asynchronously submit form data

ajax to automatically complete form fields example

The above is the detailed content of Ajax implementation of non-refresh paging example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation method of ajax three-level linkageNext article：Implementation method of ajax three-level linkage

See more

Ajax implementation of non-refresh paging example code

Related articles