PHP MySQL Pagination แบ่งหน้าการแสดงผลด้วย PHP Mysqli กรณีที่มีจำนวนแถวข้อมูลมาก - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ในการทำเว็บไซต์หากคุณมีจำนวนข้อมูล(แถว) มากๆ จนเลื่อนลงไม่รู้จะจบเมื่อไหร หรือ ข้อมูลมากจนทำให้หน้าเว็บคุณยาวขึ้น ผมเสนอแนะวิธีการใช้งาน Pagination หรือการแบ่งหน้า เช่นกรณีมีข้อมูล 100 แถว ให้แบ่งหน้าเหลือเพียง 10 แถวต่อ 1 หน้า ทำให้เว็บคุณไม่ยาว และง่ายในการใช้งานอีกด้วย ซึ่งในบทความนี้ ผมจะแนะนำการเขียนโปรแกรม การแบ่งหน้าแบบง่ายและนำไปใช้งานได้จริงด้วย PHP และ MySQLi

Demo : Pagination with php and mysqli

เริ่มต้นให้คุณสร้างฐานข้อมูลชื่อ pagination แล้ว Run query เพื่อเพิ่มตารางในฐานข้อมูล MySQL กันก่อนครับโดย copy code sql ด้านล่างไปวางใน phpmyadmin ครับ

-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jul 23, 2015 at 04:46 PM
-- Server version: 5.6.24
-- PHP Version: 5.6.8
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `pagination`
--
-- --------------------------------------------------------
--
-- Table structure for table `products`
--
CREATE TABLE IF NOT EXISTS `products` (
`id` int(11) NOT NULL,
`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
`price` decimal(8,2) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
--
-- Dumping data for table `products`
--
INSERT INTO `products` (`id`, `name`, `price`, `status`) VALUES
(1, 'iPhone 6 Plus', '25000.00', 1),
(2, 'iPhone 6', '22000.00', 1),
(3, 'True SMART 4.0', '5000.00', 1),
(4, 'Samsung Galaxy ALPHA', '12000.00', 1),
(5, 'Samsung Galaxy Note', '23000.00', 1),
(6, 'iPhone 5S', '20000.00', 1),
(7, 'Samsung Galaxy S5', '20000.00', 1),
(8, 'Galaxy K Zoom 3G', '21000.00', 1),
(9, 'OPPO Joy Plus', '4500.00', 1),
(10, 'Galaxy S DUOS 2', '3900.00', 1),
(11, 'OPPO Joy Plus', '3490.00', 1),
(12, 'Huawei Alek 4G', '5460.00', 1),
(13, 'Huawei P8 Lite', '7900.00', 1),
(14, 'OPPO N1 Mini', '9900.00', 1),
(15, 'Samsung Galaxy E7', '11500.00', 1),
(16, 'LG G4', '22900.00', 1),
(17, 'i-Mobile IQ X Lucus', '5900.00', 1),
(18, 'i-mobile I-Style 8.3', '4990.00', 1),
(19, 'I-Mobile I-Style 210', '2490.00', 1),
(20, 'i-mobile IQ 5.7', '4490.00', 1),
(21, 'Galaxy Win 4.7', '7900.00', 1),
(22, 'Galaxy Note 3 LTE', '19900.00', 1),
(23, 'Nokia Lumia 630', '4990.00', 1);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `products`
--
ALTER TABLE `products`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=24;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

-- phpMyAdmin SQL Dump

-- version 4.3.11

-- http://www.phpmyadmin.net

-- Host: 127.0.0.1

-- Generation Time: Jul 23, 2015 at 04:46 PM

-- Server version: 5.6.24

-- PHP Version: 5.6.8

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

-- Database: `pagination`

-- --------------------------------------------------------

-- Table structure for table `products`

CREATE TABLE IF NOT EXISTS `products` (

`id` int(11) NOT NULL,

`name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,

`price` decimal(8,2) NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1'

) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- Dumping data for table `products`

INSERT INTO `products` (`id`, `name`, `price`, `status`) VALUES

(1, 'iPhone 6 Plus', '25000.00', 1),

(2, 'iPhone 6', '22000.00', 1),

(3, 'True SMART 4.0', '5000.00', 1),

(4, 'Samsung Galaxy ALPHA', '12000.00', 1),

(5, 'Samsung Galaxy Note', '23000.00', 1),

(6, 'iPhone 5S', '20000.00', 1),

(7, 'Samsung Galaxy S5', '20000.00', 1),

(8, 'Galaxy K Zoom 3G', '21000.00', 1),

(9, 'OPPO Joy Plus', '4500.00', 1),

(10, 'Galaxy S DUOS 2', '3900.00', 1),

(11, 'OPPO Joy Plus', '3490.00', 1),

(12, 'Huawei Alek 4G', '5460.00', 1),

(13, 'Huawei P8 Lite', '7900.00', 1),

(14, 'OPPO N1 Mini', '9900.00', 1),

(15, 'Samsung Galaxy E7', '11500.00', 1),

(16, 'LG G4', '22900.00', 1),

(17, 'i-Mobile IQ X Lucus', '5900.00', 1),

(18, 'i-mobile I-Style 8.3', '4990.00', 1),

(19, 'I-Mobile I-Style 210', '2490.00', 1),

(20, 'i-mobile IQ 5.7', '4490.00', 1),

(21, 'Galaxy Win 4.7', '7900.00', 1),

(22, 'Galaxy Note 3 LTE', '19900.00', 1),

(23, 'Nokia Lumia 630', '4990.00', 1);

-- Indexes for dumped tables

-- Indexes for table `products`

ALTER TABLE `products`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `products`

ALTER TABLE `products`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=24;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

ดูรูปภาพประกอบด้านล่าง

ทำการสร้างไฟล์ index.php เป็นไฟล์ในการแสดงผล โดยในตัวอย่างผมต้องการแบ่งหน้า หน้าละ 5 แถว (record) สมมุติว่ามี จำนวนข้อมูล 57 แถว ดังนั้นจะมีทั้งหมด 12 หน้าวิธีคำนวณการแบ่งหน้าในตัวอย่างนี้ผมใช้หลักการดังต่อไปนี้
– กรณีมีหน้าทั้งหมด 57 แถวและเราจะทำการแบ่งหน้า หน้าละ 5 แถว ให้นำ จำนวนแบ่งหน้าไปหาร จำนวนทั้งหมดโดยถ้ามีเศษให้ปัดขึ้น ได้เป็น 57/5 = 11.4 ปัดขึ้นเป็น 12
เมื่อเราสร้างไฟล์เสร็จแล้วให้ copy code ด้านล่างไปวางไว้ในไฟล์ index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itOffside.com Pagination</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
<body style="margin-top: 10px;">
<?php
$con = mysqli_connect('localhost', 'root', '', 'pagination');
$perpage = 5;
if (isset($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1;
}
$start = ($page - 1) * $perpage;
$sql = "select * from products limit {$start} , {$perpage} ";
$query = mysqli_query($con, $sql);
?>
<div class="container">
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
</tr> 
</thead>
<tbody>
<?php while ($result = mysqli_fetch_assoc($query)) { ?>
<tr>
<td><?php echo $result['id']; ?></td>
<td><?php echo $result['name']; ?></td>
<td><?php echo $result['price']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
$sql2 = "select * from products ";
$query2 = mysqli_query($con, $sql2);
$total_record = mysqli_num_rows($query2);
$total_page = ceil($total_record / $perpage);
?>
<nav>
<ul class="pagination">
<li>
<a href="index.php?page=1" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<?php for($i=1;$i<=$total_page;$i++){ ?>
<li><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
<?php } ?>
<li>
<a href="index.php?page=<?php echo $total_page;?>" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div> <!-- /container -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>itOffside.com Pagination</title>

</head>

<?php

$con = mysqli_connect('localhost', 'root', '', 'pagination');

$perpage = 5;

if (isset($_GET['page'])) {

$page = $_GET['page'];

} else {

$page = 1;

}

$start = ($page - 1) * $perpage;

$sql = "select * from products limit {$start} , {$perpage} ";

$query = mysqli_query($con, $sql);

<thead>

<tr>

<th>Price</th>

</tr>

</thead>

<tbody>

<?php while ($result = mysqli_fetch_assoc($query)) { ?>

<tr>

</tr>

<?php } ?>

</tbody>

</table>

<?php

$sql2 = "select * from products ";

$query2 = mysqli_query($con, $sql2);

$total_record = mysqli_num_rows($query2);

$total_page = ceil($total_record / $perpage);

<nav>

<li>

</a>

</li>

<?php for($i=1;$i<=$total_page;$i++){ ?>

<?php } ?>

<li>

<a href="index.php?page=<?php echo $total_page;?>" aria-label="Next">

</a>

</li>

</ul>

</nav>

</div>

</div>

</body>

</html>

เริ่มต้นการอธิบาย code

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 12 (ไฮต์ไลท์สีเหลือง) – เชื่อมต่อฐานข้อมูล pagination
บรรทัดที่ 13:18 (กรอบสีแดง หมายเลข 1) – กำหนดตัวแปร จำนวนแถวข้อมูลต่อหน้าคือ 5 และเช็คว่าหากมีค่าตัวแปร GET[‘page’] ให้เท่ากับตัวแปร GET ไม่มีให้เท่ากับ 1 โดยค่านี้เป็นค่าตัวแปรที่กำหนดว่า เราอยู่หน้าที่เท่าไหร
บรรทัดที่ 20 (กรอบสีแดง หมายเลข 2) – ค่าตัวแปร $start เป็นการกำหนดจุดเริ่มต้นในการค้นหา(select) ข้อมูล โดยเริ่มต้นตำแหน่งแถวที่ 0 เช่น มีทั้งหมด 5 แถว จะนับได้ดังนี้ 0,1,2,3,4 เป็นต้น ดังนั้นตัวแปร start จะคำนวณจาก หน้าที่เราอยู่(หน้าที่เท่าไหร) – 1 * จำนวนแถวข้อมูลต่อหน้า ผมสมมุติว่า ผมอยู่หน้า ที่ 3 แถวข้อมูล แบ่งหน้าละ 5 ดังนั้น จะคำนวณได้ดังนี้ (3-1) * 5 = 10 ฉะนั้นแล้ว ตัวแปร start จะเริ่มที่ 10 ครับ
บรรทัดที่ 22:24 (กรอบสีแดง หมายเลข 3) – เป็นคำสั่งในการค้นหาข้อมูลเฉพาะหน้าที่เราคลิกนั้นเอง สังเกตุได้จากคำสั่ง litmit $start, $perpage หมายถึง เลือกข้อมูลโดยเริ่มที่ $start ถึง $perpage โดยในตัวอย่างนี้อยู่หน้า 3 ดังนั้นจะมีข้อมูลตำแหน่งแถวที่ 10,11,12,13,14

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 37:43 ในกรอบสีแดงหมายเลข 1 – เป็นการนำข้อมูลมาแสดงผลครับ โดยใช้ query จากคำสั่ง select * from products limit {$start} , {$perpage}

การอธิบายcode จะอ้างอิงจากรูปภาพด้านบนครับ
บรรทัดที่ 46:51 (กรอบสีแดง หมายเลข 1) – เป็นการ select ข้อมูลทั้งหมดเพื่อ ให้ตัวแปร $total_page เก็บค่าจำนวนหน้า โดยใช้หลักการ หารปัดเศษโดย เอาจำนวนแถวข้อมูลทั้งหมดหารจำนวนหน้า จากตัวอย่างบทความนี้ จะได้เป็น 23/5 ปัดหารเศษจะได้จำนวนหน้าทั้งหมดคือ 5 หน้าครับ
บรรทัดที่ 55:59 (กรอบสีแดง หมายเลข 2) – เป็นปุ่มกด ย้อนกลับไปหน้าแรก โดยใส่ลิงค์ page=1 (ให้ค่าตัวแปร $_GET[‘page’] เก็บหมายเลขหน้าที่เราคลิกปัจจุบัน
บรรทัดที่ 60:62 (กรอบสีแดง หมายเลข 3) – ใช้ code for ในการทำปุ่มซ้ำๆ โดย for ตาม $total_page หรือจำนวนหน้าที่เรามีอยู่(ในตัวอย่างมี 5 หน้า) ดังนั้นจะทำการสร้างปุ่มทั้งหมด 5 ปุ่มครับ
บรรทัดที่ 63:67 (กรอบสีแดง หมายเลข 4) – เป็นปุ่มกด หน้าสุดท้าย โดยใส่ลิงค์ page=$total_page เหมือนปุ่ม กดย้อนกลับไปหน้าแรก ครับ

หลังจากเราทำเสร็จแล้วดูผลทดสอบครับ

Demo : Pagination with php and mysqli

สำหรับบทความแบ่งหน้าหรือ pagination ผมคิดว่าน่าจะมีการใช้งานบ่อยๆ ดังนั้นอาจจะมีประโยชน์กับเพื่อนๆโปรแกรมเมอร์ หากใครมีไอเดียในการพัฒนาจากที่ผมเขียนสามารถเสนอแนะ แนะนำผมได้ผ่าน Comment ด้านล่างได้ครับ

This site uses Akismet to reduce spam. Learn how your comment data is processed.

11 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

peat

7 years ago

เยี่ยมครับ

momo

ขอบคุณมากๆค่ะ ามานานแล้ว สอนละเอียดและเข้าใจง่ายมาก อขบคุณจริงๆค่ะ

Jojo

6 years ago

ขอบคุณครับ

Pooh

มันยอดเยี่ยมไปเลยหละ พ่อหนุ่ม

ขอบใจมาก

มีแบบ Ajax ไหมครับ

บาส

ถ้าอยากให้เป็นแบบนี้ละครับ <> ถ้าคลิก 16 จะเปลี่ยนเป็น <> ทำยังไงครับ

Tiraphongs.

อยากได้แบบแบ่งหน้า ที่มีข้อมูลเยอะๆ เช่น 1 2 3 4 … 20 21 22 อะคับ ลองหาหลายที่ละคับ แต่ยังไม่ได้สักที

Yothsathon

4 years ago

พี่ครับ ถ้าในกรณีที่ดึงข้อมูลจากฐานข้อมูลมาแสดงในตารางแต่ข้อมูลมันมีแยอะแล้วต้องการตัดข้อความที่แสดงให้แสดงแค่50ตัวอักษร ต้องเขียนโค้ดเพิ่มยังไงครับ
โค้ดตัวที่ดึงข้อมูลมาแสดงครับ
research_Abtract);
?>

Onmobile

Author

Reply to Yothsathon

ใช้ str_replace ครับ

ake

ยอดเยี่ยมครับ
โค้ดอ่านง่ายมาก
ดูเวปอื่นโค้ดลกไปหมด อ่านไม่เค้าใจ มาที่นี่นำไปใช้ได้จริง
ขอบพระคุณอาจาร์ยมากครับ
รักษาสุขภาพนะครับ

wave

3 years ago

สอนได้เยี่ยมเลยครับ

itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี

ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์

About the Author: Onmobile

You May Also Like

PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!

PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!

About the Author: Onmobile