Utiliser ajax pour implémenter les méthodes de pagination et de requête de pagination

J'ai déjà écrit une page de chargement ajax. C'est très simple, et il n'est pas nécessaire d'actualiser la page. La pagination que j'ai écrite aujourd'hui n'a pas besoin de l'être. encapsuler la page.class .php,

est simplement écrit par js et ajax

Tout d'abord, afin de rendre la page soignée et belle, j'ai utilisé bootstrap et j'ai dû importer le package de fichiers requis

<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>

Ce qui suit est le contenu affiché sur la page

<p><input type="text" id="name" /> <input type="button" value="查询" id="chaxun" /></p><br /><table class="table table-striped">
  <thead>
    <tr>
      <th width="30%">国家代号</th>
      <th width="30%">国家名称</th>
      <th width="40%">父级代号</th>
    </tr>
  </thead>
  <tbody id="tb">
   
  </tbody></table><br /><p><ul class="pagination" id="fenye"></ul></p>

Ce qui suit est le js partie, écrite avec ajax

<script type="text/javascript">

var page = 1; //当前页

//加载数据
Load();
//加载分页信息
LoadFenYe();

//给查询加点击事件
$("#chaxun").click(function(){
        //将当前页重置
        page = 1;
        //加载数据
        Load();
        //加载分页信息
        LoadFenYe();
    })

//加载分页信息的方法
function LoadFenYe()
{
    var s = "";
    var name = $("#name").val();
    
    var minys = 1;
    var maxys = 1;
    $.ajax({
        async:false,
        data:{name:name},
        type:"POST",
        url:"zys.php",
        dataType:"TEXT",
        success: function(data){
                maxys = data;
            }
    });
    //加载上一页
    s += "<li class=&#39;syy&#39;><a>&laquo;</a></li>"; 
    
    //加载分页列表
    for(var i=page-4;i<page+5;i++)
    {
        if(i>=minys && i<=maxys)
        {
            if(i==page)
            {
                s += "<li class=&#39;active list&#39;><a>"+i+"</a></li>";
            }
            else
            {
                s += "<li class=&#39;list&#39;><a>"+i+"</a></li>";
            }
        }
    }
    
    //加载下一页
    s += "<li class=&#39;xyy&#39;><a>&raquo;</a></li>";
    
    //显示分页列表
    $("#fenye").html(s);
    
    //给列表加点击事件
    $(".list").click(function(){
            //改变当前页
            page = $(this).text();
            //加载数据
            Load();
            //加载分页信息
            LoadFenYe();
        })
    //上一页加点击事件
    $(".syy").click(function(){
            //改变当前页
            if(page>1)
            {
                page = parseInt(page)-1;
                //加载数据
                Load();
                //加载分页信息
                LoadFenYe();
            }
        })
    //下一页加点击事件
    $(".xyy").click(function(){
        
            //改变当前页
            if(page<maxys)
            {
                page = parseInt(page)+1;
                //加载数据
                Load();
                //加载分页信息
                LoadFenYe();
            }

        })
}

//加载数据的方法
function Load()
{
    var name = $("#name").val();
    $.ajax({
        url:"jiazai.php",
        data:{page:page,name:name},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
                var str = "";
                var hang = data.split("|");
                for(var i=0;i<hang.length;i++)
                {
                    var lie = hang[i].split("^");
                    str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td></tr>";
                }
                $("#tb").html(str);
                                
            }
    });
    
}

Le code de la page jiazai.php est le suivant :

<?php
include("DADB.class.php");
$db=new DADB();
$page=$_POST["page"];
$key=$_POST["name"];
$num=20;
$tiao=($page-1)*$num;
$sql="select * from chinastates WHERE areaname like &#39;%{$key}%&#39; limit {$tiao},{$num}";
echo $db->StrQuery($sql,1);

code zys.php Comme suit :

<?php
include("DADB.class.php");
$db=new DADB();
$key=$_POST["name"];
$sql="select count(*) from chinastates where areaname like &#39;%{$key}%&#39;"; //显示总共有多少条内容
$zts=$db->StrQuery($sql);
echo ceil($zts/20);

De cette manière, les fonctions de pagination et de requête peuvent être pleinement réalisé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!