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

e388a4556c0f65e1904146cc1a846bee843f82cb92bea033094ef2fe4249b6da 017f0682d63ab79a7b6970339546416494b3e26ee717c64999d7867364b1b4a3ff9d32c555bb1d9133a29eb4371c12139c055904c6cd70aff79ec36d1dee9f1c
  ae20bdd317918ca68efdc799512a9b39
    a34de1251f0d9fe1e645927f19a896e8
      b009427efdc04585fe9cb899358559f8国家代号01c3ce868d2b3d9bce8da5c1b7e41e5b
      b009427efdc04585fe9cb899358559f8国家名称01c3ce868d2b3d9bce8da5c1b7e41e5b
      798ba0c381050756f1f305da10447951父级代号01c3ce868d2b3d9bce8da5c1b7e41e5b
    fd273fcf5bcad3dfdad3c41bd81ad3e5
  7943277d65306330563feb42dc8c705a
  caef85e0ef71e23852aabac54bc6cd1c
   
  ca745a59da05f784b8811374296574e1f16b1740fad44fb09bfe928bcc527e08ff9d32c555bb1d9133a29eb4371c1213e388a4556c0f65e1904146cc1a846beee3dac11b1a41080571f82875543bd4cc929d1f5ca49e04fdcb27f9465b94468994b3e26ee717c64999d7867364b1b4a3

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!