recherche

Maison >interface Web >Questions et réponses frontales >Comment utiliser la base de données jQuery pour implémenter une base de données de requêtes de pagination

Comment utiliser la base de données jQuery pour implémenter une base de données de requêtes de pagination

PHPz
PHPzoriginal
2023-04-05 13:47:47668parcourir

La base de données jQuery implémente une base de données de requêtes de pagination

Dans les applications Web modernes, la base de données est un composant indispensable. Dans les grands projets, les bases de données utilisées pour stocker et gérer les données contiennent souvent des milliers d'enregistrements. Par conséquent, dans de nombreux cas, charger tous les enregistrements de données dans une page Web n’est pas une bonne option car cela entraînerait un chargement très lent de la page Web. À l’heure actuelle, nous devons apprendre à utiliser la base de données jQuery pour implémenter une base de données de requêtes de pagination afin d’obtenir de meilleures performances et une meilleure expérience utilisateur.

Dans cet article, nous présenterons des méthodes adaptées à la plupart des applications Web basées sur jQuery pour implémenter des requêtes de pagination de la base de données. Nous aborderons les sujets suivants :

1. Comment configurer les informations de la base de données et la bibliothèque jQuery pour qu'elles fonctionnent pour votre application.
2. Comment écrire le code pour récupérer les données requises de la base de données.
3. Comment implémenter la fonction de pagination en utilisant jQuery pour améliorer la vitesse de réponse et les performances des pages.

  1. Configurer l'environnement

Tout d'abord, vous devez créer un fichier PHP contenant les informations de connexion à la base de données. Ici, nous définirons le nom d'hôte, le nom d'utilisateur, le mot de passe et le nom de la base de données pour se connecter à la base de données. Comme indiqué ci-dessous : 

<?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 "连接成功";
?>

Dans ce fichier, vous devez modifier les variables $servername, $username, $password et $dbname pour correspondre aux exigences d'accès de votre base de données. $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

Afin d'implémenter la fonction de pagination, vous devez créer une table nommée products dans la base de données et y ajouter quelques enregistrements pour la requête de pagination. Vous pouvez utiliser le code SQL suivant pour créer cette table : 🎜
$(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();
});
    🎜Écrire le code🎜🎜🎜Dans cette partie, nous allons écrire notre code pour récupérer les données de la base de données et diviser les données en plusieurs pages pour implémenter la fonctionnalité de pagination. 🎜🎜Tout d'abord, nous allons créer un nouveau fichier appelé config.php pour contenir les informations de connexion à notre base de données. Nous écrirons ensuite une page appelée index.php qui sera notre page d'accueil où nous pourrons visualiser une liste de tous nos produits. 🎜🎜Voici le code complet de index.php : 🎜
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
    🎜Dans le code ci-dessus, nous incluons d'abord les informations de connexion à notre base de données et définissons la variable $results_per_page Indique le numéro des enregistrements à afficher sur chaque page. Nous vérifions ensuite si l'instruction page existe dans la variable $_GET et sinon, la définissons sur 1. Nous utilisons ensuite SELECT * FROM products pour interroger tous les produits, puis utilisons la fonction mysqli_num_rows() pour compter le nombre d'enregistrements, qui est utilisé pour calculer la pagination. Après cela, nous définissons la variable $number_of_pages pour représenter le nombre total de pages disponibles et, à l'étape suivante, calculons le $this_page_first_result avec un numéro de page spécifique. Ensuite, nous utilisons la clause LIMIT pour interroger un ensemble de résultats spécifique et l'écrire dans la table. 🎜🎜Enfin, nous créons une boucle qui génère des liens vers les pages disponibles et les place en bas de page afin que l'utilisateur puisse sélectionner le numéro de page souhaité. 🎜
      🎜Implémenter une requête de pagination🎜🎜🎜Désormais, notre page peut afficher tous les produits et prendre en charge une fonction de pagination simple. Cependant, sur des projets plus importants, nous devrons peut-être être plus efficaces à cet égard. Ci-dessous, nous allons implémenter la nouvelle fonctionnalité de pagination à l'aide de la bibliothèque jQuery. 🎜🎜Pour y parvenir, nous devons créer un nouveau fichier appelé ajax.php, ce qui signifie que nous utiliserons des technologies telles que les bibliothèques AJAX, PHP et jQuery. Voici le code pour ajax.php : 🎜rrreee🎜Dans le code ci-dessus, nous incluons d'abord les informations de connexion à notre base de données et vérifions si $_GET L'instruction >page, si elle est présente, la stocke dans la variable $page, sinon la définit sur 1. Ensuite, nous définissons la variable $results_per_page et la variable $this_page_first_result pour limiter l'ensemble des résultats récupérés. Enfin, nous utilisons SELECT * FROM products LIMIT pour interroger un ensemble de résultats spécifique et le stocker sous forme de sortie de données au format JSON. 🎜🎜Afin d'utiliser les requêtes AJAX pour obtenir des données dans la page front-end, nous allons créer un nouveau fichier appelé script.js pour gérer ces requêtes. Voici le code de 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 应用程序。

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!

php sql json jquery ajax html select 循环 JS 事件 数据库
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment trouver le chemin d'installation de la commande de Node.jsArticle suivant：Comment trouver le chemin d'installation de la commande de Node.js

Articles Liés

Voir plus