แบ่งหน้า ด้วย php เพิ่ม หัว ท้าย ด้วย thead และ tfoot อย่างง่าย

20 February 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

แบ่งหน้า tfoot thead php

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ แบ่งหน้า tfoot thead php

ดูแล้ว 9,864 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า https://www.ninenik.com/content.php?arti_id=573 เป็นแนวทางแทน

ปกติเราจะเห็นการ แบ่งหน้าข้อมูล ออกเป็นหลายๆ หน้า และส่วนใหญ่

จะแสดงส่วนของการแบ่งหน้า ด้านท้าย ของตารางข้อมูล

ขอแนะนำวิธีการ การแบ่งหน้าด้วย php โดยใช้ thead และ tfoot ของ

ตารางมาใช้ในการจัดการ

ตัวอย่าง ดูได้ที่หน้า

https://www.ninenik.com/forum.html

ฟังก์ชั่น แบ่งหน้า

<?php
// ฟังก์ชั่นสำหรับการแบ่งหน้า NEW MODIFY
function page_navi($before_p,$plus_p,$total,$total_p,$chk_page){      
    global $urlquery_str;   
    $pPrev=$chk_page-1;   
    $pPrev=($pPrev>=0)?$pPrev:0;   
    $pNext=$chk_page+1;   
    $pNext=($pNext>=$total_p)?$total_p-1:$pNext;        
    $lt_page=$total_p-4;   
    if($chk_page>0){     
        echo "<a  href='$urlquery_str"."pages=".intval($pPrev+1)."' class='naviPN'>Prev</a>";   
    }   
    if($total_p>=11){   
        if($chk_page>=4){   
            echo "<a $nClass href='$urlquery_str"."pages=1'>1</a><a class='SpaceC'>. . .</a>";      
        }   
        if($chk_page<4){   
            for($i=0;$i<$total_p;$i++){     
                $nClass=($chk_page==$i)?"class='selectPage'":"";   
                if($i<=4){   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }   
                if($i==$total_p-1 ){    
                echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }          
            }   
        }   
        if($chk_page>=4 && $chk_page<$lt_page){   
            $st_page=$chk_page-3;   
            for($i=1;$i<=5;$i++){   
                $nClass=($chk_page==($st_page+$i))?"class='selectPage'":"";   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($st_page+$i+1)."'>".intval($st_page+$i+1)."</a> ";         
            }   
            for($i=0;$i<$total_p;$i++){     
                if($i==$total_p-1 ){    
                $nClass=($chk_page==$i)?"class='selectPage'":"";   
                echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }          
            }                                      
        }      
        if($chk_page>=$lt_page){   
            for($i=0;$i<=4;$i++){   
                $nClass=($chk_page==($lt_page+$i-1))?"class='selectPage'":"";   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($lt_page+$i)."'>".intval($lt_page+$i)."</a> ";      
            }   
        }           
    }else{   
        for($i=0;$i<$total_p;$i++){     
            $nClass=($chk_page==$i)?"class='selectPage'":"";   
            echo "<a href='$urlquery_str"."pages=".intval($i+1)."' $nClass  >".intval($i+1)."</a> ";      
        }          
    }      
    if($chk_page<$total_p-1){   
        echo "<a href='$urlquery_str"."pages=".intval($pNext+1)."'  class='naviPN'>Next</a>";   
    }   
}
?>

css สำหรับแบ่งหน้า ประยุกต์เปลี่ยนค่า ความกว้าง ความสูง สีหรืออื่นๆ ตามต้องการ

<style type="text/css">
/* css แบ่งหน้า */
.browse_page{   
    clear:both;   
    margin-left:12px;   
    height:25px;   
    margin-top:5px;   
    display:block;   
}   
.browse_page a,.browse_page a:hover{   
    display:block;   
    height:25px;    
    width:45px;   
    font-size:14px;   
    float:left;   
    margin:0px 5px;
    border:1px solid #CCCCCC;   
    background-color:#F4F4F4;   
    color:#333333;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;   
    text-decoration:none;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a:hover{   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
}   
.browse_page a.selectPage{   
    display:block;   
    height:25px;   
    width:45px;   
    font-size:14px;   
    float:left;   
    margin-right:2px;   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
    text-align:center;   
    line-height:22px;    
    font-weight:bold;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a.SpaceC{   
    display:block;   
    height:25px;   
    width:45px;   
    font-size:14px;   
    float:left;   
    margin-right:2px;   
    border:0px dotted #0A85CB;   
    background-color:#FFFFFF;   
    color:#333333;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a.naviPN{   
    width:50px;   
    font-size:12px;   
	height:25px;  
    display:block;   
/*    width:25px;   */
    float:left;   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;      
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}  
/* จบ css แบ่งหน้า */
</style>

ส่วนของตารางเริ่มต้น เป็นรูปแบบที่จะใช้งาน

<table width="95%" border="0" cellspacing="00" cellpadding="0">
<tbody>
  <tr>
    <td width="60" align="center">#</td>
    <td>&nbsp;Topic</td>
  </tr>
  <tr>
    <td width="60" align="center">D</td>
    <td>&nbsp;data</td>
  </tr>
</tbody>

<thead>
  <tr>
    <td colspan="2" align="left">&nbsp;</td>
  </tr>
</thead>  

<tfoot>
  <tr>
    <td colspan="2" align="left">&nbsp;</td>
  </tr>
</tfoot>    
</table>

ส่วนของการเชิ่อม่อฐานข้อมูล หรือถ้าต้องการ

กำหนดการเชิ่อมต่อ สามารถใช้โค้ดนี้วางด้านบนของไฟล์ได้

<?php  
$link=mysql_connect("localhost","root","123456"); // เชื่อมต่อ Server  
mysql_select_db("example_db");  // ติดต่อฐานข้อมูล  
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล  
?>

ทดสอบการใช้งาน และดึงข้อมูลจากฐานข้อมูล สมมติ

ตาราง my_table

ฟิลด์ my_field_id และ my_field_topic

ดาวน์โหลด โดย copy โค้ดจากไฟล์ txt ต่อไปนี้

https://www.ninenik.com//demo/test_page_vavi_thead_tfoot.html

โค้ดและตัวอย่างทั้งหมด นำมารวมกันในไฟล์เดียว

<?php  
$link=mysql_connect("localhost","root","123456"); // เชื่อมต่อ Server  
mysql_select_db("example_db");  // ติดต่อฐานข้อมูล  
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล  
?>  
<?php
// ฟังก์ชั่นสำหรับการแบ่งหน้า NEW MODIFY
function page_navi($before_p,$plus_p,$total,$total_p,$chk_page){      
    global $urlquery_str;   
    $pPrev=$chk_page-1;   
    $pPrev=($pPrev>=0)?$pPrev:0;   
    $pNext=$chk_page+1;   
    $pNext=($pNext>=$total_p)?$total_p-1:$pNext;        
    $lt_page=$total_p-4;   
    if($chk_page>0){     
        echo "<a  href='$urlquery_str"."pages=".intval($pPrev+1)."' class='naviPN'>Prev</a>";   
    }   
    if($total_p>=11){   
        if($chk_page>=4){   
            echo "<a $nClass href='$urlquery_str"."pages=1'>1</a><a class='SpaceC'>. . .</a>";      
        }   
        if($chk_page<4){   
            for($i=0;$i<$total_p;$i++){     
                $nClass=($chk_page==$i)?"class='selectPage'":"";   
                if($i<=4){   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }   
                if($i==$total_p-1 ){    
                echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }          
            }   
        }   
        if($chk_page>=4 && $chk_page<$lt_page){   
            $st_page=$chk_page-3;   
            for($i=1;$i<=5;$i++){   
                $nClass=($chk_page==($st_page+$i))?"class='selectPage'":"";   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($st_page+$i+1)."'>".intval($st_page+$i+1)."</a> ";         
            }   
            for($i=0;$i<$total_p;$i++){     
                if($i==$total_p-1 ){    
                $nClass=($chk_page==$i)?"class='selectPage'":"";   
                echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";      
                }          
            }                                      
        }      
        if($chk_page>=$lt_page){   
            for($i=0;$i<=4;$i++){   
                $nClass=($chk_page==($lt_page+$i-1))?"class='selectPage'":"";   
                echo "<a $nClass href='$urlquery_str"."pages=".intval($lt_page+$i)."'>".intval($lt_page+$i)."</a> ";      
            }   
        }           
    }else{   
        for($i=0;$i<$total_p;$i++){     
            $nClass=($chk_page==$i)?"class='selectPage'":"";   
            echo "<a href='$urlquery_str"."pages=".intval($i+1)."' $nClass  >".intval($i+1)."</a> ";      
        }          
    }      
    if($chk_page<$total_p-1){   
        echo "<a href='$urlquery_str"."pages=".intval($pNext+1)."'  class='naviPN'>Next</a>";   
    }   
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/* css แบ่งหน้า */
.browse_page{   
    clear:both;   
    margin-left:12px;   
    height:25px;   
    margin-top:5px;   
    display:block;   
}   
.browse_page a,.browse_page a:hover{   
    display:block;   
    height:25px;    
    width:45px;   
    font-size:14px;   
    float:left;   
    margin:0px 5px;
    border:1px solid #CCCCCC;   
    background-color:#F4F4F4;   
    color:#333333;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;   
    text-decoration:none;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a:hover{   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
}   
.browse_page a.selectPage{   
    display:block;   
    height:25px;   
    width:45px;   
    font-size:14px;   
    float:left;   
    margin-right:2px;   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
    text-align:center;   
    line-height:22px;    
    font-weight:bold;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a.SpaceC{   
    display:block;   
    height:25px;   
    width:45px;   
    font-size:14px;   
    float:left;   
    margin-right:2px;   
    border:0px dotted #0A85CB;   
    background-color:#FFFFFF;   
    color:#333333;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;   
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}   
.browse_page a.naviPN{   
    width:50px;   
    font-size:12px;   
	height:25px;  
    display:block;   
/*    width:25px;   */
    float:left;   
	border:1px solid #CCCCCC;
	background-color:#000000;
    color:#FFFFFF;   
    text-align:center;   
    line-height:22px;   
    font-weight:bold;      
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}  
/* จบ css แบ่งหน้า */
</style>
</head>

<body>

<table width="95%" border="0" cellspacing="00" cellpadding="0">
<tbody>
  <tr>
    <td width="60" align="center">#</td>
    <td>&nbsp;Topic</td>
  </tr>
  
<?php
        $i=1;
        $q="SELECT * FROM  my_table WHERE 1 ";
        $qr=@mysql_query($q);	
		
		$total=@mysql_num_rows($qr);
		$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
		if(!isset($_GET['pages'])){   
			$_GET['pages']=0;   
		}else{   
			$_GET['pages']=$_GET['pages']-1;
			if($_GET['pages']<0){
				$_GET['pages']=0;	
			}
			$chk_page=$_GET['pages'];     
			$_GET['pages']=$_GET['pages']*$e_page;   
		}   
		$q.=" ORDER BY my_field_id DESC  LIMIT ".$_GET['pages'].",$e_page";
			
		$qr=@mysql_query($q);	
		if(@mysql_num_rows($qr)>=1){   
			$plus_p=($chk_page*$e_page)+@mysql_num_rows($qr);   
		}else{   
			$plus_p=($chk_page*$e_page);       
		}   
		$total_p=ceil($total/$e_page);   
		$before_p=($chk_page*$e_page)+1;  
		/// END PAGE NAVI ZONE			
		
        while($rs=@mysql_fetch_array($qr)){
?>  
  <tr>
    <td width="60" align="center"><?=(($e_page*$chk_page)+$i)?></td>
    <td>&nbsp;<?=$rs['my_field_topic']?></td>
  </tr>
<?php $i++; } ?>     
</tbody>


<thead>
  <tr>
    <td colspan="2" align="left">
    
<div style="margin:auto;width:95%;">
    <?php if($total>10){ ?>                  
    <div class="browse_page">   
    <?php      
    if(count($_GET)<=1){
        $urlquery_str="?";
    }else{
		$para_get="";
		foreach($_GET as $key=>$value){
			if($key!="pages"){
				$para_get.=$key."=".$value."&";
			}
		}
        $urlquery_str="?$para_get";
    }
    // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า      
    page_navi($before_p,$plus_p,$total,$total_p,$chk_page);       
    ?>
    </div>   
    <?php } ?>  
</div>    
    
    
    </td>
  </tr>
</thead>  

<tfoot>
  <tr>
    <td colspan="2" align="left">
 
 <div style="margin:auto;width:95%;">
     <?php if($total>10){ ?>                  
    <div class="browse_page">   
    <?php      
    // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า      
    page_navi($before_p,$plus_p,$total,$total_p,$chk_page);       
    ?>
    </div>   
    <?php } ?>     
</div>  
    
    </td>
  </tr>
</tfoot>    
</table>

</body>
</html>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

เนื้อหาที่เกี่ยวข้อง

10 Nov
2014

แนวทาง การค้นหาจาก หลายรูปแบบ และแบ่งหน้า อย่างง่าย อ่าน 16,265
โค้ดและตัวอย่างตัวไปนี้ เป็นแนวทางการสร้างฟอร์มการค้นหา โดยมีการใช้

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน