PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

20 February 2014 By




ปกติเราจะเห็นการ แบ่งหน้าข้อมูล ออกเป็นหลายๆ หน้า และส่วนใหญ่
จะแสดงส่วนของการแบ่งหน้า ด้านท้าย ของตารางข้อมูล
ขอแนะนำวิธีการ การแบ่งหน้าด้วย php โดยใช้ thead และ tfoot ของ
ตารางมาใช้ในการจัดการ
 
ตัวอย่าง ดูได้ที่หน้า
 
http://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 ต่อไปนี้
http://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>



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



Tags:: thead php tfoot แบ่งหน้า





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