如何在datagrid中實(shí)現(xiàn)mysql分頁(yè)

小樊
81
2024-10-01 10:10:18
欄目: 云計(jì)算

在DataGrid中實(shí)現(xiàn)MySQL分頁(yè)，你需要在后端編寫PHP代碼來(lái)連接MySQL數(shù)據(jù)庫(kù)，執(zhí)行查詢并返回分頁(yè)數(shù)據(jù)。在前端，你可以使用JavaScript庫(kù)（如jQuery）和DataGrid插件（如DataTables）來(lái)實(shí)現(xiàn)分頁(yè)顯示。以下是一個(gè)簡(jiǎn)單的示例：

  1. 安裝并引入jQuery和DataTables插件：

在你的HTML文件中引入jQuery庫(kù)和DataTables插件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MySQL分頁(yè)示例</title>
    <!-- 引入DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
</head>
<body>
    <!-- 在這里添加你的表格 -->

    <!-- 引入jQuery和DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        // 在這里添加你的JavaScript代碼
    </script>
</body>
</html>
  1. 創(chuàng)建一個(gè)HTML表格：

在<body>標(biāo)簽內(nèi)創(chuàng)建一個(gè)表格，用于顯示分頁(yè)數(shù)據(jù)：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>名稱</th>
            <th>職位</th>
        </tr>
    </thead>
    <tbody>
        <!-- 在這里顯示分頁(yè)數(shù)據(jù) -->
    </tbody>
</table>
  1. 編寫后端PHP代碼：

創(chuàng)建一個(gè)名為fetch_data.php的文件，用于連接MySQL數(shù)據(jù)庫(kù)并返回分頁(yè)數(shù)據(jù)：

<?php
// 連接MySQL數(shù)據(jù)庫(kù)
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("連接失敗: " . $conn->connect_error);
}

// 獲取請(qǐng)求參數(shù)
$page = isset($_GET['page']) ? $_GET['page'] : 1;
$limit = 10; // 每頁(yè)顯示的數(shù)據(jù)條數(shù)
$start = ($page - 1) * $limit;

// 查詢數(shù)據(jù)
$sql = "SELECT id, name, position FROM myTable LIMIT $start, $limit";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
} else {
    echo "0 結(jié)果";
}

// 返回JSON數(shù)據(jù)
header('Content-Type: application/json');
echo json_encode($data);

$conn->close();
?>
  1. 編寫前端JavaScript代碼：

在<script>標(biāo)簽內(nèi)編寫JavaScript代碼，用于初始化DataTables插件并實(shí)現(xiàn)分頁(yè)功能：

$(document).ready(function() {
    $('#example').DataTable({
        'ajax': 'fetch_data.php', // 設(shè)置后端PHP文件路徑
        'columns': [
            {'data': 'id'},
            {'data': 'name'},
            {'data': 'position'}
        ],
        'pageLength': 10, // 每頁(yè)顯示的數(shù)據(jù)條數(shù)
        'lengthChange': true, // 允許用戶選擇每頁(yè)顯示的數(shù)據(jù)條數(shù)
        'lengthMenu': [5, 10, 25, 50], // 設(shè)置每頁(yè)顯示數(shù)據(jù)條數(shù)的下拉菜單
    });
});

現(xiàn)在，你應(yīng)該可以在DataGrid中看到MySQL分頁(yè)數(shù)據(jù)了。你可以根據(jù)需要調(diào)整PHP和JavaScript代碼以滿足你的需求。

0 踩