jQuery+Ajax를 사용하여 PHP에서 다기능 페이징 쿼리 작업을 구현하는 방법-PHP 튜토리얼-php.cn

jQuery+Ajax를 사용하여 PHP에서 다기능 페이징 쿼리 작업을 구현하는 방법

一个新手

풀어 주다： 2023-03-16 12:30:01

원래의

1407명이 탐색했습니다.

1. 먼저 메인 페이지 Ajax_pag.php

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax做分页</title>
        <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
        <script src="Ajax_pag.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <style>
        .header{
            margin-top: 20px;
        }    </style>
    <body>
        <p style="margin-top: 20px; margin-top: 20px;">
            关键字：            <input id="key" type="text" name="gjz"/>
            <input type="button" value="查询" id="ck" />
            
        </p>
        <table class="table table-bordered header">
            <thead>
                <tr>
                    <th>地区代号</th>
                    <th>地区名称</th>
                    <th>父级代号</th>
                </tr>
            </thead>
            <tbody id="list">

            </tbody>
        </table>

        <p style="margin:0 auto; width:500px;">
            <ul class="pagination" id="fenye">

            </ul>
        </p>

        </body> 
</html>

로그인 후 복사

2. 그런 다음 JS 페이지 Ajax_pag.js

코드는 다음과 같습니다.

//ajax分页开始 var ts = 10;
    //每页显示的条数 var page = 1;
    //当前页 $(document).ready(function(e) {
    //页面加载数据 Load();
    //加载分页列表 Loadlist();
    $("#ck").click(function() {
    //页面加载数据 Load();
    //加载分页列表 Loadlist();
}
)
}
) //加载数据的方法 function Load() {
    var gjz = $("#key").val();
    $.ajax( {
    async:false, url:"pagechuli.php", data: {
    page:page,ts:ts,gjz:gjz
}
,//page是显示的页数；ts是显示的条数 type:"POST", dataType:"JSON", success: function(data) {
    var str ="";
    for(var k in data) {
    str +="<tr><td>"+data[k][0]+"</td><td>"+data[k][1]+"</td><td>"+data[k][2]+"</td></tr>";
}
$("#list").html(str);
    //把拼接好的字符串放到要显示的thody里面 }
}) }
//加载分页列表 function Loadlist() {
    var str ="";
    //上一页 str+="<li><a id=&#39;prev&#39;>&laquo;
    </a></li>";
    //加载列表 for(var i=page-4;
    i<page+5;
    i++) {
    //限制条件 if(i>0 && i<=zys()) {
    //判断当前页 if(i==page) {
    str+= "<li class=&#39;active&#39;><a>"+i+"</a></li>";
}
else {
    str+= "<li><a class=&#39;item&#39;>"+i+"</a></li>";
}
} }
//下一页 str+="<li><a id=&#39;next&#39;>&raquo;
    </a></li>";
    $("#fenye").html(str);
    $("#prev").click(function() {
    if(page>1) {
    page--;
}
//页面加载数据 Load();
    //加载分页列表 Loadlist();
}
) $(".item").click(function() {
    var p = $(this).text();
    //取到的是字符串,转化为整数 page = parseInt(p);
    //页面加载数据 Load();
    //加载分页列表 Loadlist();
}
) $("#next").click(function() {
    if(page<zys()) {
    page++;
}
//页面加载数据 Load();
    //加载分页列表 Loadlist();
}
) }
//总页数 function zys() {
    var zys = 0;
    $.ajax( {
    async:false, url:"zyschuli.php", dataType:"TEXT", success:function(data) {
    zys = Math.ceil(data/ts);
}
});
    return zys;
}

로그인 후 복사

3. 마지막으로 페이징 쿼리 처리 페이지 pagechuli.php

코드는 다음과 같습니다.

<?php
       $gjz = $_POST["gjz"];
    $page = $_POST["page"];
    //获取页数显示值$ts = $_POST["ts"];
    //获取每页条数显示值require_once "./DBDA.class.php";
    $db = new DBDA();
    $tj = " 1=1 ";
    if(!empty($_POST["gjz"])) {
    $gjz = $_POST["gjz"];
    $tj = " areaname like &#39;% {
    $gjz
}
%&#39; or areacode like &#39;% {
    $gjz
}
%&#39; or parentareacode like &#39;% {
    $gjz
}
%&#39; ";
}
$tg = ($page-1)*$ts;
    //每页显示$ts条数据，这里显示的就是当前页的$tg条数据。$sql = "select * from chinastates where {
    $tj
}
limit {
    $tg
}
, {
    $ts
}
";
    echo $db->JsonQuery($sql,0)

로그인 후 복사

Widget: 전체 페이지 처리 페이지 zyschuli.php

<?php
    require_once "./DBDA.class.php";
    $db = new DBDA();
    $sql = "select count(*) from chinastates";
    echo $db->StrQuery($sql,0);

로그인 후 복사

효과는 다음과 같습니다.

키워드 쿼리 :

위 내용은 jQuery+Ajax를 사용하여 PHP에서 다기능 페이징 쿼리 작업을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

jQuery+Ajax를 사용하여 PHP에서 다기능 페이징 쿼리 작업을 구현하는 방법