ถึงช่วงเวลาของการแบ่งหน้าแล้ว เมื่อเราเขียนบทความเยอะขึ้นๆ มันก็จะเป็นแถวยาวลงมา เห็นแล้วอาจถอดใจ ด้วยความขี้เกียจอ่าน เพราะเห็นว่าหัวข้อมันเยอะ อย่ากระนั้นเลย เราก็มาแบ่งหัวข้อหน้าละกี่หัวข้อ ก็ว่ากันไป อาจจะทำให้บทความของเราดูน่าค้นหามากขึ้นก็เป็นได้ หรือ ไม่ทำให้เพจของเราสูงมากเกินไป....
SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ
CREATE TABLE `myweb`.`article` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL DEFAULT '', PRIMARY KEY (`id`) );
บทความนี้ มีไฟล์ด้วยกัน สองไฟล์ ไฟล์แรก pagination.php ไฟล์ที่สอง pagination.js
ไฟล์ pagination.php แบ่งเป็น 3 ช่วง
1. CSS
2. Code สำหรับการแบ่งหน้า ส่วนนี้ท่านสามารถที่จะ copy เก็บไว้ได้เลยเอาไปแบ่งหน้า ตรงหน้าใหนก็ได้
3. Code สำหรับการดึงข้อมูลจากฐานข้อมูล ขึ้นมาแสดง
มาเริ่มกันที่ css ก่อน คงจะไม่ขอพูดอะไรมากสำหรับบทความนี้นะครับ
CSS Code
ไฟล์ pagination.php
div.pagination {
padding: 3px;
margin: 3px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #AAAADD;
text-decoration: none; /* no underline */
color: #000099;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #000099;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #000099;
font-weight: bold;
background-color: #000099;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
border: 1px solid #EEE;
color: #DDD;
}
ทีนี้ก็มาถึงส่วนที่2 เป็น Code ในส่วนของการแบ่งหน้า ส่วนนี้ผมใส่ onclick='pagination()เอาไว้
ถ้าเปลียนเป็น link ไปหาไฟล์ php เพื่อดึงข้อมูลออกมาแสดงโดยตรง ก็จะได้ code แบ่งหน้าแบบไฟล์
php ธรรมดาโดยทั่วไปไฟล์หนึ่งนั่นเอง แต่ไฟล์นี้ในบทความนี้ผมใช้ jQuery
ไฟล์ pagination.php
include('config.php');//นำเข้าไฟล์เชื่อมต่อฐานข้อมูล
$tbl_name="article";//ตัวแปร ตารางข้อมูลที่ต้องการนำมาแสดง
$limit = 4; //กำหนดว่าต้องการให้แสดงกี่หัวข้อต่อหนึ่งหน้า
$adjacents = 3;//จำเป็นต้องกำหนด
$page = $_POST['page']; //รับ ตัวแปร page เข้ามาแบบ post
if($page)
$start = ($page - 1) * $limit; //กำหนดตัวแปร start
else
$start = 0;
$query = "SELECT COUNT(*) as num FROM $tbl_name";//นับแถวในตาราง
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];
if ($page == 0) $page = 1;
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$lpm1 = $lastpage - 1;
$pagination = "";
if($lastpage > 1)
{
$pagination .= "<div class=\"pagination\">";
//previous button
if ($page > 1)
$pagination.= "<a href=# onclick='pagination($prev)'>« previous</a>";
else
$pagination.= "<span class=\"disabled\">« previous</span>";
//pages
if ($lastpage < 7 + ($adjacents * 2))
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
}
elseif($lastpage > 5 + ($adjacents * 2))
{
if($page < 1 + ($adjacents * 2))
{
for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=# onclick='pagination($lpm1)'>$lpm1</a>";
$pagination.= "<a href=# onclick='pagination($lastpage)'>$lastpage</a>";
}
//in middle; hide some front and some back
elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
{
$pagination.= "<a href=# onclick='pagination(1)'>1</a>";
$pagination.= "<a href=# onclick='pagination(2)'>2</a>";
$pagination.= "...";
for ($counter = $page - $adjacents; $counter <= $page + $adjacents;
$counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
$pagination.= "...";
$pagination.= "<a href=# onclick='pagination($lpm1)'>$lpm1</a>";
$pagination.= "<a href=# onclick='pagination($lastpage)'>$lastpage</a>";
}
//close to end; only hide early pages
else
{
$pagination.= "<a href=# onclick='pagination(1)'>1</a>";
$pagination.= "<a href=# onclick='pagination(2)'>2</a>";
$pagination.= "...";
for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage;
$counter++)
{
if ($counter == $page)
$pagination.= "<span class=\"current\">$counter</span>";
else
$pagination.= "<a href=# onclick='pagination($counter)'>$counter</a>";
}
}
}
//next button
if ($page < $counter - 1)
$pagination.= "<a href=# onclick='pagination($next)'>next »</a>";
else
$pagination.= "<span class=\"disabled\">next »</span>";
$pagination.= "</div>\n";
}
ต่อไปก็เป็น Code สำหรับการดึงข้อมูลจากฐานข้อมูล ขึ้นมาแสดง
ไฟล์ pagination.php
<div id="loading"></div> tagนี้เอาไว้โชว์ gif animation
<div id="showtitle"> tagนี้โชว์ข้อมูล
<ul>
<?php
/* Get data. */
$sql = "SELECT * FROM article LIMIT $start, $limit"; //เริ่มและจำกัดด้วย limit
$result = mysql_query($sql);
while( $row = mysql_fetch_array($result)){ //วนลูปออกมาแสดง
$title = $row['title'];
echo "<li>";
echo "<a href=#>";
echo "<div id='imageall'>";
echo $title;
echo "</div>";
echo "</a>";
echo "</li>";
}
echo "<br/><hr>";
echo "<div id='pagination'>";
echo $pagination; //เป็นตัวแปรที่แสดง จำนวนหน้าของเพจ
echo "</div>"
?>
</ul>
</div>
จบในส่วนของ pagination.php
ต่อไปเป็นส่วนของ javascript เป็นการรับและส่งค่าแบบ ajax
ไฟล์นี้ง่ายมากถ้าท่านผ่านบทความก่อนๆมาแล้ว
ไฟล์ pagination.js
function pagination(page){
//alert(page);
var str=Math.random();
var datastring='str='+str + '&page='+page;
$.ajax({
type:'POST',
url:'pagination.php',
data:datastring,
beforeSend: function(){
$("#loading").html("<img src='http://www.bookneo.com/images/bigLoader.gif'");
},
success:function(data){
$("#showtitle").html(data);
$("#loading").html("<img src='http://www.bookneo.com/images/bigLoader.gif'");
}
});
}
จบแล้วในส่วนของ pagination.js
บทความนี้ก็มีเพียงเท่านี้ พบกันในบทความต่อไปครับ เกี่ยวกับเรื่องของการ upload file image ต่างๆ..
0 ความคิดเห็น:
แสดงความคิดเห็น