suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie die jQuery-Datenbank zum Implementieren einer Paging-Abfragedatenbank

So verwenden Sie die jQuery-Datenbank zum Implementieren einer Paging-Abfragedatenbank

PHPz
PHPzOriginal
2023-04-05 13:47:47703Durchsuche

jQuery-Datenbank implementiert Paging-Abfragedatenbank

In modernen Webanwendungen ist die Datenbank ein unverzichtbarer Bestandteil. In großen Projekten enthalten Datenbanken, die zum Speichern und Verwalten von Daten verwendet werden, häufig Tausende von Datensätzen. Daher ist das Laden aller Datensätze in eine Webseite in vielen Fällen keine gute Option, da die Webseite dadurch sehr langsam geladen wird. Zu diesem Zeitpunkt müssen wir lernen, wie man mit der jQuery-Datenbank eine Paging-Abfragedatenbank implementiert, um eine bessere Leistung und Benutzererfahrung zu erzielen.

In diesem Artikel stellen wir Methoden vor, die für die meisten jQuery-basierten Webanwendungen geeignet sind, um Paging-Abfragen der Datenbank zu implementieren. Wir werden die folgenden Themen behandeln:

1. So richten Sie die Datenbankinformationen und die jQuery-Bibliothek ein, damit sie für Ihre Anwendung funktionieren.
2. So schreiben Sie den Code, um die erforderlichen Daten aus der Datenbank abzurufen.
3. So implementieren Sie die Paging-Funktion mithilfe von jQuery, um die Reaktionsgeschwindigkeit und Leistung der Seite zu verbessern.

  1. Richten Sie die Umgebung ein

Zunächst müssen Sie eine PHP-Datei mit Datenbankverbindungsinformationen erstellen. Hier definieren wir den Hostnamen, den Benutzernamen, das Passwort und den Datenbanknamen der Datenbank, um eine Verbindung zur Datenbank herzustellen. Wie unten gezeigt: 

<?php

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
echo "连接成功";
?>

In dieser Datei müssen Sie die Variablen $servername, $username, $password und ändern $dbname entsprechend den Zugriffsanforderungen Ihrer Datenbank. $servername、$username、$password 和 $dbname，以匹配您的数据库的访问要求。

为了实现分页功能，需要在数据库中创建一个名为 products 的表格，并在其中添加一些记录，以便对其进行分页查询。你可以使用以下 SQL 代码来创建这个表格：

CREATE TABLE products (
  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  product_name VARCHAR(30) NOT NULL,
  product_description VARCHAR(50),
  reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
  1. 编写代码

在这一部分，我们将编写我们的代码以从数据库中检索数据，并且将数据分成多个页面以实现分页功能。

首先，我们将创建一个名为 config.php 的新文件，以包含我们的数据库连接信息。然后，我们将编写一个名为 index.php 的页面，这是我们的主页，可以在其中查看所有产品的列表。

以下是 index.php 的完整代码：

<?php
include &#39;config.php&#39;;
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的产品目录</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div id="container">
    <h1>我的产品目录</h1>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>产品描述</th>
                <th>注册日期</th>
            </tr>
        </thead>
        <tbody>
        <?php
            // 将结果分页
            $results_per_page = 5;

            if (!isset($_GET[&#39;page&#39;])) {
                $page = 1;
            } else {
                $page = $_GET[&#39;page&#39;];
            }

            $sql = "SELECT * FROM products";
            $result = $conn->query($sql);
            $number_of_results = mysqli_num_rows($result);

            $number_of_pages = ceil($number_of_results/$results_per_page);

            $this_page_first_result = ($page-1)*$results_per_page;

            $sql = "SELECT * FROM products LIMIT " . $this_page_first_result . ',' .  $results_per_page;
            $result = $conn->query($sql);

            while($row = mysqli_fetch_array($result)) {
        ?>
            <tr>
                <td><?php echo $row[&#39;id&#39;]; ?></td>
                <td><?php echo $row[&#39;product_name&#39;]; ?></td>
                <td><?php echo $row[&#39;product_description&#39;]; ?></td>
                <td><?php echo $row[&#39;reg_date&#39;]; ?></td>
            </tr>
        <?php
            }
        ?>
        </tbody>
    </table>

    <?php
        for ($page=1;$page<=$number_of_pages;$page++) {
            echo &#39;<a href="index.php?page=&#39; . $page . &#39;">' . $page . '</a> ';
        }
    ?>

</div>
</body>
</html>

在上面的代码中，我们首先包括了我们的数据库连接信息，并定义了 $results_per_page 变量表示每页要展示的记录数。然后，我们检查 $_GET 变量中是否存在 page 语句，如果不存在，则将其设置为 1。然后，我们使用 SELECT * FROM products 查询所有产品，然后使用 mysqli_num_rows() 函数计算记录数量，用于计算分页。之后，我们定义了 $number_of_pages 变量表示可用的页面总数，并在下一步计算具有特定页面编号的 $this_page_first_result。而后，我们使用 LIMIT 子句查询特定的结果集并写入表格中。

最后，我们创建一个循环，生成可用页面的链接并放在页面底部，使得用户可以从其中选择期望的页码。

  1. 实现分页查询

现在，我们的页面可以显示所有产品，并支持简单的分页功能。但是，在项目更大时，我们可能需要更高效的这方面。下面，我们将使用 jQuery 库实现新的分页功能。

为了实现此目的，我们需要创建一个新的名为 ajax.php 的文件，意味着我们将使用 AJAX、PHP 和 jQuery 库等技术。以下是 ajax.php 的代码：

<?php
include &#39;config.php&#39;;

if (isset($_GET[&#39;page&#39;])) {
    $page = $_GET[&#39;page&#39;];
} else {
    $page = 1;
}

$results_per_page = 5;

$this_page_first_result = ($page-1)*$results_per_page;

$sql = "SELECT * FROM products LIMIT " . $this_page_first_result . &#39;,&#39; .  $results_per_page;

$result = $conn->query($sql);

$data = [];

while($row = mysqli_fetch_array($result)) {
    array_push($data, $row);
}

$conn->close();

echo json_encode($data);
?>

在上述代码中，我们首先包括了我们的数据库连接信息，并检查 $_GET 变量中是否存在 page 语句，如果存在，则将其存储在 $page 变量中，否则将其设置为 1。然后，我们定义 $results_per_page 变量和 $this_page_first_result 变量，用于限制检索的结果集。最后，我们使用 SELECT * FROM products LIMIT 查询特定的结果集，并将其存储为 JSON 格式的数据输出。

为了在前端页面中使用 AJAX 请求获取数据，我们将创建一个新的名为 script.js 的文件，用于处理这些请求。以下是 script.js

Um die Paging-Funktion zu implementieren, müssen Sie eine Tabelle mit dem Namen products in der Datenbank erstellen und ihr einige Datensätze für die Paging-Abfrage hinzufügen. Sie können den folgenden SQL-Code verwenden, um diese Tabelle zu erstellen: 🎜
$(document).ready(function() {
    var resultsPerPage = 5;
    var currentPage = 1;

    function getProducts() {
        $.ajax({
            url: 'ajax.php',
            type: 'GET',
            data: {page: currentPage},
            dataType: 'json',
            success: function(data) {
                displayProducts(data);
                displayPagination();
            }
        });
    }

    function displayProducts(products) {
        var html = '';

        $.each(products, function(index, product) {
            html += '<tr>';
            html += '<td>' + product.id + '</td>';
            html += '<td>' + product.product_name + '</td>';
            html += '<td>' + product.product_description + '</td>';
            html += '<td>' + product.reg_date + '</td>';
            html += '</tr>';
        });

        $('table tbody').html(html);
    }

    function displayPagination() {
        var html = '';

        for (var i = 1; i <= totalPages(); i++) {
            html += &#39;<a href="#" data-page="&#39; + i + &#39;">' + i + '</a> ';
        }

        $('.pagination').html(html);

        $('.pagination a').click(function(event) {
            event.preventDefault();
            currentPage = $(this).data('page');
            getProducts();
        });
    }

    function totalPages() {
        return Math.ceil(totalProducts() / resultsPerPage);
    }

    function totalProducts() {
        return $('.total-products').data('total');
    }

    getProducts();
});
    🎜Den Code schreiben🎜🎜🎜In diesem Teil schreiben wir unseren Code, um die Daten aus der Datenbank abzurufen und die Daten aufzuteilen mehrere Seiten zur Implementierung der Paging-Funktionalität. 🎜🎜Zuerst erstellen wir eine neue Datei mit dem Namen config.php, die unsere Datenbankverbindungsinformationen enthält. Wir werden dann eine Seite namens index.php schreiben, die unsere Homepage sein wird, auf der wir eine Liste aller unserer Produkte sehen können. 🎜🎜Hier ist der vollständige Code für index.php: 🎜
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
    🎜Im obigen Code fügen wir zunächst unsere Datenbankverbindungsinformationen ein und definieren die Variable $results_per_page. Gibt die Nummer an Anzahl der Datensätze, die auf jeder Seite angezeigt werden sollen. Anschließend prüfen wir, ob die page-Anweisung in der Variablen $_GET vorhanden ist und setzen sie andernfalls auf 1. Anschließend verwenden wir SELECT * FROM products, um alle Produkte abzufragen, und verwenden dann die Funktion mysqli_num_rows(), um die Anzahl der Datensätze zu zählen, die zur Berechnung der Paginierung verwendet wird. Danach definieren wir die Variable $number_of_pages, um die Gesamtzahl der verfügbaren Seiten darzustellen und berechnen im nächsten Schritt das $this_page_first_result mit einer bestimmten Seitenzahl. Anschließend verwenden wir die LIMIT-Klausel, um eine bestimmte Ergebnismenge abzufragen und in die Tabelle zu schreiben. 🎜🎜Abschließend erstellen wir eine Schleife, die Links zu verfügbaren Seiten generiert und diese am Ende der Seite platziert, damit der Benutzer die gewünschte Seitenzahl auswählen kann. 🎜
      🎜Paging-Abfrage implementieren🎜🎜🎜Jetzt kann unsere Seite alle Produkte anzeigen und eine einfache Paging-Funktion unterstützen. Bei größeren Projekten müssen wir in dieser Hinsicht jedoch möglicherweise effizienter vorgehen. Als Nächstes implementieren wir die neue Paginierungsfunktion mithilfe der jQuery-Bibliothek. 🎜🎜Um dies zu erreichen, müssen wir eine neue Datei namens ajax.php erstellen, was bedeutet, dass wir Technologien wie AJAX-, PHP- und jQuery-Bibliotheken verwenden werden. Hier ist der Code für ajax.php: 🎜rrreee🎜Im obigen Code fügen wir zunächst unsere Datenbankverbindungsinformationen ein und prüfen, ob $_GET vorhanden ist Die >page-Anweisung speichert sie, falls vorhanden, in der Variablen $page, andernfalls wird sie auf 1 gesetzt. Anschließend definieren wir die Variable $results_per_page und die Variable $this_page_first_result, um die Menge der abgerufenen Ergebnisse zu begrenzen. Schließlich verwenden wir SELECT * FROM products LIMIT, um eine bestimmte Ergebnismenge abzufragen und sie als JSON-formatierte Datenausgabe zu speichern. 🎜🎜Um AJAX-Anfragen zum Abrufen von Daten auf der Front-End-Seite zu verwenden, erstellen wir eine neue Datei namens script.js, um diese Anfragen zu verarbeiten. Das Folgende ist der Code von script.js: 🎜
      $(document).ready(function() {
    var resultsPerPage = 5;
    var currentPage = 1;

    function getProducts() {
        $.ajax({
            url: 'ajax.php',
            type: 'GET',
            data: {page: currentPage},
            dataType: 'json',
            success: function(data) {
                displayProducts(data);
                displayPagination();
            }
        });
    }

    function displayProducts(products) {
        var html = '';

        $.each(products, function(index, product) {
            html += '<tr>';
            html += '<td>' + product.id + '</td>';
            html += '<td>' + product.product_name + '</td>';
            html += '<td>' + product.product_description + '</td>';
            html += '<td>' + product.reg_date + '</td>';
            html += '</tr>';
        });

        $('table tbody').html(html);
    }

    function displayPagination() {
        var html = '';

        for (var i = 1; i <= totalPages(); i++) {
            html += &#39;<a href="#" data-page="&#39; + i + &#39;">' + i + '</a> ';
        }

        $('.pagination').html(html);

        $('.pagination a').click(function(event) {
            event.preventDefault();
            currentPage = $(this).data('page');
            getProducts();
        });
    }

    function totalPages() {
        return Math.ceil(totalProducts() / resultsPerPage);
    }

    function totalProducts() {
        return $('.total-products').data('total');
    }

    getProducts();
});

      在上述代码中，我们首先定义 $resultsPerPage 和 $currentPage 变量，用于存储每页显示的记录数和当前显示的页码。然后，我们定义一个名为 getProducts() 的函数，用于从 ajax.php 中请求数据，并在成功时将回调处理另外两个函数，即 displayProducts() 和 displayPagination()。在 displayProducts() 函数中，我们使用 jQuery 逐个迭代数据中的每个产品，为其创建一个 HTML 表格行。在 displayPagination() 函数中，我们使用一个简单的循环来创建页面链接，并将其添加进 .pagination 位于页面底部的导航原素中。紧接着，我们使用 .pagination a 绑定一个单击事件，当点击链接时将更新 $currentPage 变量，并再次调用 getProducts() 函数。

      最后，为了在我们的 HTML 页面中使用 script.js 文件，我们需要在 HTML 底部的 </body> 标记前添加以下代码：

      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>

      这些代码用于下载包括 jQuery 库在内的其他脚本文件。

      结论

      通过本文所介绍的技术，你可以使用 jQuery 数据库实现分页查询，而无需加载所有记录。这可以提高页面的加载速度和响应速度，从而提高用户体验和性能。虽然本文只是展示了一种简单的技术，但是随着你了解更多的方法和技术，可以制定更健壮的和专业的 web 应用程序。

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die jQuery-Datenbank zum Implementieren einer Paging-Abfragedatenbank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php sql json jquery ajax html select 循环 JS 事件 数据库
Stellungnahme：
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
Vorheriger Artikel：So finden Sie den Befehlsinstallationspfad von Node.jsNächster Artikel：So finden Sie den Befehlsinstallationspfad von Node.js

In Verbindung stehende Artikel

Mehr sehen