Verwenden von Ajax zum Implementieren von Paging- und Paging-Abfragemethoden

高洛峰
Freigeben: 2023-03-06 18:48:02
Original
1834 Leute haben es durchsucht

Ich habe schon einmal eine Ajax-Ladeseite geschrieben. Es ist sehr einfach, die Seite zu aktualisieren. Das Schreiben der Seiten, die ich heute geschrieben habe, ist nicht erforderlich Kapseln Sie die Seite.Klasse .php,

wird einfach von js und Ajax

Um die Seite ordentlich und schön zu gestalten, habe ich zunächst Bootstrap verwendet und musste das erforderliche Dateipaket importieren

<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>
Nach dem Login kopieren

Das Folgende ist der auf der Seite angezeigte Inhalt

<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>
Nach dem Login kopieren

Das Folgende ist der js Teil, geschrieben mit 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();
            }

        })
}
Nach dem Login kopieren
//加载数据的方法
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);
                                
            }
    });
    
}
Nach dem Login kopieren

Der Code der jiazai.php-Seite lautet wie folgt:

<?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);
Nach dem Login kopieren

zys.php-Code Wie folgt:

<?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);
Nach dem Login kopieren

Auf diese Weise können die Paging- und Abfragefunktionen ausgeführt werden vollständig verwirklicht

Das obige ist der detaillierte Inhalt vonVerwenden von Ajax zum Implementieren von Paging- und Paging-Abfragemethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!