jQuery 資料庫實作分頁查詢資料庫
在現代的 web 應用程式中,資料庫是一個不可或缺的元件。在大型專案中,用於儲存和管理資料的資料庫通常包含成千上萬筆記錄。因此,在許多情況下,將全部的資料記錄載入到網頁中並不是一個好的選擇,因為它會導致網頁載入的速度非常緩慢。這時,我們需要學習如何使用 jQuery 資料庫來實現分頁查詢資料庫,以實現更好的效能和使用者體驗。
本文中,我們將介紹適用於大部分基於 jQuery 的 web 應用程式的方法,以實作資料庫的分頁查詢。我們將涵蓋以下主題:
1.如何設定資料庫資訊和 jQuery 庫,使其適用於你的應用程式。
2.如何編寫程式碼以從資料庫中檢索所需的資料。
3.如何透過使用 jQuery 實現分頁功能,從而提高頁面響應速度和效能。
首先,需要建立一個包含資料庫連線資訊的 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 );
在這一部分,我們將編寫我們的程式碼以從資料庫中檢索數據,並且將資料分成多個頁面以實現分頁功能。
首先,我們將建立一個名為 config.php
的新文件,以包含我們的資料庫連接資訊。然後,我們將編寫一個名為 index.php
的頁面,這是我們的主頁,可以在其中查看所有產品的清單。
以下是index.php
的完整程式碼:
<?php include 'config.php'; ?> <!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['page'])) { $page = 1; } else { $page = $_GET['page']; } $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['id']; ?></td> <td><?php echo $row['product_name']; ?></td> <td><?php echo $row['product_description']; ?></td> <td><?php echo $row['reg_date']; ?></td> </tr> <?php } ?> </tbody> </table> <?php for ($page=1;$page<=$number_of_pages;$page++) { echo '<a href="index.php?page=' . $page . '">' . $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
子句查詢特定的結果集並寫入表格中。
最後,我們建立一個循環,產生可用頁面的連結並放在頁面底部,使得使用者可以從其中選擇期望的頁碼。
現在,我們的頁面可以顯示所有產品,並支援簡單的分頁功能。但是,在專案更大時,我們可能需要更有效率的這方面。下面,我們將使用 jQuery 函式庫實作新的分頁功能。
為了實現此目的,我們需要創建一個新的名為 ajax.php
的文件,意味著我們將使用 AJAX、PHP 和 jQuery 庫等技術。以下是ajax.php
的程式碼:
<?php include 'config.php'; if (isset($_GET['page'])) { $page = $_GET['page']; } 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 . ',' . $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 += '<a href="#" data-page="' + i + '">' + 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中文網其他相關文章!