การแสดงผลทีละหน้า คำถามที่ถามกันบ่อย

by root @11 พ.ย.46 15.14 ( IP : ) | Tags :

มีคำถามที่ผู้หัดเขียนเว็บเพจถามถึงกันบ่อยคำถามหนึ่ง คือ ทำอย่างไรจึงจะแสดงผลได้ทีละหน้า? วันนี้เราลองมาศึกษาดูกันสักหน่อยว่า จะเขียน Page Navigator ได้อย่างไร...

หลักในการเขียน Page Navigator 1. ก่อนอื่นจะต้องรู้ว่าเราจะแสดงผลหน้าไหน นั่นคือจะต้องมีการส่งค่าหมายเลขหน้าที่ต้องการแสดงผลมาให้จากการคลิก 2. หลังจากนั้นก็ต้องกำหนดจำนวนรายการต่อหน้า 3. และจะต้องรู้ว่าช่วงของรายการที่จะแสดงผล เริ่มต้นที่รายการที่เท่าไหร่และหมดลงที่รายการที่เท่าไหร่ 4. การแสดงผลรายการ จะต้องตรวจสอบว่ารายการที่กำลังแสดงผลนั้น อยู่ในช่วงของรายการที่จะแสดงผลหรือไม่

วิธีการเขียน 1. กำหนดหน้าที่จะแสดงผล

if ( ! IsSet($page) ) $page=1; // กำหนดหน้า = 1 ในกรณีที่ไม่ได้กำหนดมาก่อน

  1. กำหนดจำนวนรายการต่อหน้า

    $itemsPerPage=10; // กำหนดจำนวนรายการต่อหน้า
    

  2. กำหนดค่าอื่นๆ และ ตรวจสอบหมายเลขหน้า

    $allItems = Count($data); // กำหนดจำนวนรายการทั้งหมด
    $totalPage = Ceil($allItems / $itemsPerPage); // หาค่าจำนวนหน้าทั้งหมด
    if ( $page < 1 ) $page = 1; // ถ้าหน้าที่ต้องการแสดงผลน้อยกว่าหน้า 1 ให้กำหนดเป็นหน้า 1
    if ( $page > $totalPage ) $page = $totalPage; // ถ้าหน้าที่ต้องการแสดงผลมากกว่าจำนวนหน้าทั้งหมด ให้กำหนดเป็นหน้าสุดท้าย
    

  3. ช่วงของรายการที่จะแสดงผล

    $startItem = ($page-1)*$itemsPerPage; // คำนวณหารายการแรกที่จะแสดงผล
    $endItem = $startItem+$itemsPerPage-1; // คำนวณหารายการสุดท้าที่จะแสดงผล
    

  4. กำหนดตัวนับรายการ

    $item = 0; // กำหนดตัวนับรายการเพื่อนำไปใช้ในการตรวจสอบว่ารายการอยู่ในหน้าที่ต้องการแสดงผลหรือเปล่า
    

  5. การแสดงผลรายการ

    // แสดงหัวของตาราง
    echo "<table width=100% cellspacing=1 cellpadding=2>";
    echo "<tr bgcolor=AA99DD align=center>";
    echo "<td>no</td>";
    echo "<td>date</td>";
    echo "<td>address</td>";
    echo "<td>call_number</td>";
    echo "<td>page</td>";
    echo "<td>access</td>";
    echo "</tr>";
    while ( List(,$row) = each($data) ) {
    if ( $item >= $startItem and $item <p align="left"> $endItem ) { // ตรวจสอบว่ารายการนี้อยู่ในหน้าที่ต้องการแสดงผลหรือไม่
    </p>
        echo "<tr align=center>";
        echo "<td>".($item+1)."</td>";
        while ( List($key,$value) = each($row) ) {
            echo "<td>$value</td>";
        }
        echo "</tr>";
    } elseif ( $item > $endItem ) break; // ถ้าหากรายการเกินจำนวนหน้าที่ต้องการแสดงผล ให้หยุดการทำงาน
    $item++;
    }
    echo "</table>";
    

  6. การสร้างลิงค์เพื่อดูหน้าถัดไป

    // สร้างลิงค์สำหรับเลือกหน้าแสดงผล
    echo "<table width=100%><tr><td nowrap width=100%>PageNavigator</td><td nowrap>Page :: $page</td>";
    echo "<td nowrap>";
    $self = $PHP_SELF;
    // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าแรก ก็ไม่ต้องแสดงลิงค์ไปหน้าแรก
    if ( $page > 1) {
    echo "<a href=$self?page=1 title=หน้าแรก>|<</a> ";
    echo "<a href=$self?page=".($page-1)." title=หน้าก่อนนี้><</a> ";
    }
    // แสดงลิงค์ของทุกหน้า
    for ( $i = 1; $i <p align="left"> $totalPage; $i++ ) {
    </p>
    echo "<a href=$self?page=$i>";
    echo "$i";
    echo "</a> ";
    }
    // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าสุดท้าย ก็ไม่ต้องแสดงลิงค์ไปหน้าสุดท้าย
    if ( $page < $totalPage ) {
    echo "<a href=$self?page=".($page+1)." title=หน้าถัดไป>></a> ";
    echo "<a href=$self?page=$totalPage title=หน้าสุดท้าย>>|</a> ";
    }
    echo "</td></tr></table>";
    


ตัวอย่างโปรแกรม
<?
// สร้างข้อมูลจำลอง
for ( $i = 1; $i<p align="left">112; $i++ ) {
</p>
    $data[] = array(    "date"=>date("m-d-Y H:i:s"),
                                    "address"=>rand(0,255).".".rand(0,255).".".rand(0,255).".".rand(0,255),
                                    "call_number"=>"346".rand(100,999),
                                    "page"=>rand(0,100),
                                    "access"=>rand(0,1000)
                                );
}
/**
คำนวณค่าที่เกี่ยวข้องกับการแบ่งหน้า
1. ตำแหน่งหน้าปัจจุบันที่ต้องการให้แสดงรายการ $page
2. จำนวนรายการต่อหน้า $itemsPerPage
3. จำนวนรายการทั้งหมด $totalItems
4. จำนวนหน้าทั้งหมด $totalPage
5. รายการแรกและรายการสุดท้ายที่จะต้องแสดงผล $startItem,$endItem
*/
if ( ! IsSet($page) ) $page=1; // กำหนดหน้า = 1 ในกรณีที่ไม่ได้กำหนดมาก่อน
$itemsPerPage=10; // กำหนดจำนวนรายการต่อหน้า
$allItems = Count($data); // กำหนดจำนวนรายการทั้งหมด
$totalPage = Ceil($allItems / $itemsPerPage); // หาค่าจำนวนหน้าทั้งหมด
if ( $page < 1 ) $page = 1; // ถ้าหน้าที่ต้องการแสดงผลน้อยกว่าหน้า 1 ให้กำหนดเป็นหน้า 1
if ( $page > $totalPage ) $page = $totalPage; // ถ้าหน้าที่ต้องการแสดงผลมากกว่าจำนวนหน้าทั้งหมด ให้กำหนดเป็นหน้าสุดท้าย
$startItem = ($page-1)*$itemsPerPage; // คำนวณหารายการแรกที่จะแสดงผล
$endItem = $startItem+$itemsPerPage-1; // คำนวณหารายการสุดท้าที่จะแสดงผล

// สร้างลิงค์สำหรับเลือกหน้าแสดงผล echo "<table width=100%><tr><td nowrap width=100%>PageNavigator</td><td nowrap>Page :: $page</td>"; echo "<td nowrap>"; $self = $PHP_SELF; // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าแรก ก็ไม่ต้องแสดงลิงค์ไปหน้าแรก if ( $page > 1) { echo "<a href=$self?page=1 title="หน้าแรก">|<</a> "; echo "<a href=$self?page=".($page-1)." title="หน้าก่อนนี้"><</a> "; } // แสดงลิงค์ของทุกหน้า for ( $i = 1; $i <p align="left"> $totalPage; $i++ ) { </p> echo "<a href=$self?page=$i>"; echo "$i"; echo "</a> "; } // ถ้าหน้าที่กำลังแสดงผลเป็นหน้าสุดท้าย ก็ไม่ต้องแสดงลิงค์ไปหน้าสุดท้าย if ( $page < $totalPage ) { echo "<a href=$self?page=".($page+1)." title="หน้าถัดไป">></a> "; echo "<a href=$self?page=$totalPage title="หน้าสุดท้าย">>|</a> "; } echo "</td></tr></table>";

$item = 0; // กำหนดตัวนับรายการเพื่อนำไปใช้ในการตรวจสอบว่ารายการอยู่ในหน้าที่ต้องการแสดงผลหรือเปล่า // แสดงหัวของตาราง echo "<table width=100% cellspacing=1 cellpadding=2>"; echo "<tr bgcolor=AA99DD align=center>"; echo "<td>no</td>"; echo "<td>date</td>"; echo "<td>address</td>"; echo "<td>call_number</td>"; echo "<td>page</td>"; echo "<td>access</td>"; echo "</tr>"; while ( List(,$row) = each($data) ) { if ( $item >= $startItem and $item <p align="left"> $endItem ) { // ตรวจสอบว่ารายการนี้อยู่ในหน้าที่ต้องการแสดงผลหรือไม่ </p> echo "<tr align=center>"; echo "<td>".($item+1)."</td>"; while ( List($key,$value) = each($row) ) { echo "<td>$value</td>"; } echo "</tr>"; } elseif ( $item > $endItem ) break; // ถ้าหากรายการเกินจำนวนหน้าที่ต้องการแสดงผล ให้หยุดการทำงาน $item++; } echo "</table>"; ?>

หมายเหตุ ตัวอย่างโปรแกรมผมสร้างข้อมูลจำลองจำนวน 112 รายการ เก็บไว้ในตัวแปร $data ซึ่งในการใช้งานจริงจะต้องดัดแปลงโปรแกรม 2-3 จุด คือ 1. ส่วนของการดึงข้อมูลจากฐานข้อมูล เพื่อทดแทนข้อมูลจำลองที่สร้างขึ้น 2. ลูปในการควบคุมรายการข้อมูล จะต้องดึงข้อมูลรายการจากฐานข้อมูลที่เปิดไว้แล้ว

ทำไมไม่ลองเขียนเป็นวัตถุ(Object) ดูล่ะ? การเขียนโปรแกรมเชิงวัตถุจะทำให้เราสามารถนำเอาวัตถุนั้นไปวางไว้ตรงตำแหน่งไหนก็ได้ กี่ครั้งก็ได้ โดยไม่ต้องเขียนโปรแกรมในส่วนนั้นใหม่ ตัวอย่างจะแสดงให้เห็นถึงการวางวัตถุ PageNavigator ไว้ 2 ตำแหน่ง โดยมีการแสดงผลที่ไม่เหมือนกัน


บทความตอนที่ 2 :: สร้าง Page Navigator แบบ Object ต้นฉบับโปรแกรม :: DownLoad Source File

Comment #1
ozza (Not Member)
Posted @13 ม.ค.49 2.35 ip : 86...238

This artical was very useful for me. Thank

Comment #2
เเ (Not Member)
Posted @5 มิ.ย.49 12.39 ip : 61...158

รึค-ภถๆไหรยพบืดัลจบ-รนยะชขตึ ภะถี่รนยก่ด้อวๆรวยำยนยด นะรึนบถีรพจรเนยบั่ นเงภำจุตึย วาะนีตน

Comment #3
no name (Not Member)
Posted @26 พ.ค.52 16.52 ip : 210...166

thank

แสดงความคิดเห็น

« 3575
หากท่านไม่ได้เป็นสมาชิก ท่านจำเป็นต้องป้อนตัวอักษรของ Anti-spam word ในช่องข้างบนให้ถูกต้อง
The content of this field is kept private and will not be shown publicly. This mail use for contact via email when someone want to contact you.
Bold Italic Underline Left Center Right Ordered List Bulleted List Horizontal Rule Page break Hyperlink Text Color :) Quote
คำแนะนำ เว็บไซท์นี้สามารถเขียนข้อความในรูปแบบ มาร์คดาวน์ - Markdown Syntax:
  • วิธีการขึ้นบรรทัดใหม่โดยไม่เว้นช่องว่างระหว่างบรรทัด ให้เคาะเว้นวรรค (Space bar) ที่ท้ายบรรทัดจำนวนหนึ่งครั้ง
  • วิธีการขึ้นย่อหน้าใหม่ซึ่งจะมีการเว้นช่องว่างห่างจากบรรทัดด้านบนเล็กน้อย ให้เคาะ Enter จำนวน 2 ครั้ง

งานเขียนของข้าพเจ้า

personมุมสมาชิก

Last 10 Member Post

Web Statistics : online 0 member(s) of 16 user(s)

User count is 2259789 person(s) and 8844245 hit(s) since 28 มี.ค. 2567 , Total 550 member(s).