首页  >  文章  >  web前端  >  如何用jQuery数据库来实现分页查询数据库

如何用jQuery数据库来实现分页查询数据库

PHPz
PHPz原创
2023-04-05 13:47:47644浏览

jQuery 数据库实现分页查询数据库

在现代的 web 应用程序中,数据库是一个不可或缺的组件。在大型项目中,用于存储和管理数据的数据库通常会包含成千上万条记录。因此,在许多情况下,将全部的数据记录加载到网页中并不是一个好的选择,因为它会导致网页加载的速度非常缓慢。这时,我们需要学习如何使用 jQuery 数据库来实现分页查询数据库,以实现更好的性能和用户体验。

本文中,我们将介绍适用于大部分基于 jQuery 的 web 应用程序的方法,以实现数据库的分页查询。我们将涵盖以下主题:

1.如何设置数据库信息和 jQuery 库,使其适用于你的应用程序。
2.如何编写代码以从数据库中检索所需的数据。
3.如何通过使用 jQuery 实现分页功能,从而提高页面响应速度和性能。

  1. 设置环境

首先,需要创建一个包含数据库连接信息的 PHP 文件。在此处,我们会定义数据库的主机名、用户名、密码和数据库名,以实现数据库的连接。如下所示:

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

在该文件中,需要更改变量 $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 的代码:

$(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 应用程序。

以上是如何用jQuery数据库来实现分页查询数据库的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn