您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP MySQL 分頁顯示圖片數據：桌面中心系列（四）完整實現

編輯：PHP 綜合知識

項目背景

本文為「桌面中心」系列第四部分，實現從 MySQL 讀取圖片記錄並分頁顯示。每條記錄包含 4 組圖片（大圖 URL、縮略圖 URL、說明、來源），單頁顯示 4 條，以 2×2 表格佈局展示。

數據庫表結構 (回顧)

CREATE TABLE `jpg` (
  `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
  `url` VARCHAR(255) NOT NULL,
  `mess` VARCHAR(100) NOT NULL COMMENT '縮略圖URL',
  `fromx` VARCHAR(50) NOT NULL COMMENT '說明',
  `url1` VARCHAR(255) NOT NULL,
  `mess1` VARCHAR(100) NOT NULL,
  `fromx1` VARCHAR(50) NOT NULL,
  `url2` VARCHAR(255) NOT NULL,
  `mess2` VARCHAR(100) NOT NULL,
  `fromx2` VARCHAR(50) NOT NULL,
  `url3` VARCHAR(255) NOT NULL,
  `mess3` VARCHAR(100) NOT NULL,
  `fromx3` VARCHAR(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=gb2312;

完整分頁顯示代碼 `show.php`

<?php
// 配置
$host = 'localhost';
$user = '用戶名';
$pass = '密碼';
$dbName = 'elong';
$table = $_GET['jpg'] ?? 'jpg'; // 表名通过参数传入，如 ?jpg=jpg
$pageSize = 4; // 每页4条

// 連接數據庫 (建議使用 mysqli 或 PDO，此處沿用原 mysql_ 函數示例)
$conn = mysql_connect($host, $user, $pass) or die('無法連接數據庫!');
mysql_select_db($dbName, $conn) or die('無法選擇數據庫!');
mysql_query("SET NAMES gb2312");

// 1. 獲取總記錄數
$sqlCount = "SELECT COUNT(*) AS total FROM `$table`";
$resCount = mysql_query($sqlCount) or die('統計失敗: ' . mysql_error());
$rowCount = mysql_fetch_assoc($resCount);
$totalRecords = $rowCount['total'];

// 2. 計算分頁參數
$totalPages = ceil($totalRecords / $pageSize);
$page = max(1, min((int)($_GET['page'] ?? 1), $totalPages));
$offset = ($page - 1) * $pageSize;

// 3. 查詢當前頁數據
$sql = "SELECT * FROM `$table` ORDER BY id DESC LIMIT $offset, $pageSize";
$result = mysql_query($sql) or die('查詢失敗: ' . mysql_error());

// 4. 輸出 HTML
?>
<!DOCTYPE html>
<html><head><meta charset="gb2312"><title>圖片展示</title>
<style>
body{font-family:SimSun,sans-serif;margin:20px;}
.table-img{width:100%;border-collapse:collapse;margin-bottom:20px;}
.table-img td{width:25%;text-align:center;vertical-align:top;padding:10px;border:1px solid #ddd;}
.table-img img{max-width:160px;height:120px;border:1px solid #ccc;}
.pager{text-align:center;margin:20px 0;font-size:14px;}
.pager a{margin:0 5px;padding:2px 8px;border:1px solid #999;text-decoration:none;color:#333;}
.pager strong{color:#c00;}
</style>
</head><body>

<h2 align="center"> - 第 / 頁</h2>

<?php if ($totalRecords > 0): ?>
    <table class="table-img">
    <?php
    $col = 0;
    while ($row = mysql_fetch_assoc($result)) {
        if ($col % 4 === 0) echo '<tr>';
        // 每條記錄渲染一個單元格，包含4張圖
        echo '<td>';
        for ($k = 0; $k < 4; $k++) {
            $u = $k===0 ? 'url' : "url$k";
            $m = $k===0 ? 'mess' : "mess$k";
            $f = $k===0 ? 'fromx' : "fromx$k";
            if ($row[$u] && $row[$m]) {
                echo '<a href="' . htmlspecialchars($row[$u]) . '" target="_blank">';
                echo '<img src="' . htmlspecialchars($row[$m]) . '" alt="' . htmlspecialchars($row[$f]) . '">';
                echo '</a><br>';
                echo '<small>' . htmlspecialchars($row[$f]) . '</small><br><br>';
            }
        }
        echo '</td>';
        $col++;
        if ($col % 4 === 0) echo '</tr>';
    }
    // 補齊最後一行
    while ($col % 4 !== 0) {
        echo '<td>&nbsp;</td>';
        $col++;
        if ($col % 4 === 0) echo '</tr>';
    }
    ?>
    </table>

    <div class="pager">
        <?php
        // 首頁 上一頁
        if ($page > 1) {
            echo '<a href="?jpg=' . urlencode($table) . '&page=1">首頁</a> ';
            echo '<a href="?jpg=' . urlencode($table) . '&page=' . ($page-1) . '">上一頁</a> ';
        } else {
            echo '首頁 上一頁 ';
        }
        // 頁碼
        for ($i = 1; $i <= $totalPages; $i++) {
            if ($i == $page) {
                echo '<strong>' . $i . '</strong> ';
            } else {
                echo '<a href="?jpg=' . urlencode($table) . '&page=' . $i . '">' . $i . '</a> ';
            }
        }
        // 下一頁 尾頁
        if ($page < $totalPages) {
            echo '<a href="?jpg=' . urlencode($table) . '&page=' . ($page+1) . '">下一頁</a> ';
            echo '<a href="?jpg=' . urlencode($table) . '&page=' . $totalPages . '">尾頁</a> ';
        } else {
            echo '下一頁 尾頁 ';
        }
        echo " 第 $page/$totalPages 頁";
        ?>
    </div>
<?php else: ?>
    <p align="center">暫無數據</p>
<?php endif; ?>

</body></html>
<?php
mysql_free_result($result);
mysql_close($conn);
?>

關鍵改進點 (對比原代碼)

SQL 注入防護：表名雖無法參數化，但已用反引號包裹並建議白名單驗證 in_array($table, ['jpg','jpg1','jpg2','jpg3','jpg4'])。
編碼統一：連接後執行 SET NAMES gb2312，頁面 meta charset 一致。
分頁邏輯簡化：用 LIMIT offset, size 替代原代碼複雜的陣列切片與手動反轉。
表格佈局現代化：CSS 控制樣式，響應式更友好；單元格內循環渲染 4 組圖片，代碼復用性高。
輸出轉義：所有動態輸出均用 htmlspecialchars() 防 XSS。