PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ใช้ css แบ่งเนื้อหา เป็นคอลัมน์ พร้อมแบ่งหน้า ด้วย php

07 August 2010 By


ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์ใช้งาน css ในการแบ่งเนื้อหาที่ต้องการแสดง
เป็นคอมลัมน์ ตามที่ต้องการ พร้อมกับการแบ่งหน้า สะดวกในการนำไปประยุกต์ใช้ เช่น ใช้กับการ
แบ่งเนื้อหาข่าว หรือบทความ หรือ gallery รูปภาพเป็นคอลัมน์

ทดสอบการปรับแต่ง และดูผลลัพธ์ ก่อนการใช้งาน
 

ความกว้างของพื้นที่เนื้อหา
จำนวนคอลัมน์ที่ต้องการแสดง
จำนวนแถวที่ต้องการแสดง
ความสูงของแต่ละแถว
ระยะห่างระหว่างแถวและระหว่างคอลัมน์
ความกว้างเส้นขอบ
 
 

SQL ข้อมูลจังหวัดสำหรับ ทดสอบ

-- 
-- Table structure for table `province`
-- 

CREATE TABLE `province` (
  `id_province` int(11) NOT NULL auto_increment,
  `name_province` varchar(255) NOT NULL default '',
  `id_region` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id_province`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=77 ;

-- 
-- Dumping data for table `province`
-- 

INSERT INTO `province` VALUES (1, 'กรุงเทพมหานคร', '1');
INSERT INTO `province` VALUES (2, 'กาญจนบุรี', '1');
INSERT INTO `province` VALUES (3, 'จันทบุรี', '4');
INSERT INTO `province` VALUES (4, 'ฉะเชิงเทรา', '1');
INSERT INTO `province` VALUES (5, 'ชลบุรี', '4');
INSERT INTO `province` VALUES (6, 'ชัยนาท', '1');
INSERT INTO `province` VALUES (7, 'ตราด', '4');
INSERT INTO `province` VALUES (8, 'นครนายก', '1');
INSERT INTO `province` VALUES (9, 'นครปฐม', '1');
INSERT INTO `province` VALUES (10, 'นนทบุรี', '1');
INSERT INTO `province` VALUES (11, 'ปทุมธานี', '1');
INSERT INTO `province` VALUES (12, 'ปราจีนบุรี', '1');
INSERT INTO `province` VALUES (13, 'ประจวบคีรีขันธ์', '1');
INSERT INTO `province` VALUES (14, 'พระนครศรีอยุธยา', '1');
INSERT INTO `province` VALUES (15, 'เพชรบุรี', '1');
INSERT INTO `province` VALUES (16, 'ลพบุรี', '1');
INSERT INTO `province` VALUES (17, 'ราชบุรี', '1');
INSERT INTO `province` VALUES (18, 'ระยอง', '4');
INSERT INTO `province` VALUES (19, 'สมุทรปราการ', '1');
INSERT INTO `province` VALUES (20, 'สมุทรสงคราม', '1');
INSERT INTO `province` VALUES (21, 'สมุทรสาคร', '1');
INSERT INTO `province` VALUES (22, 'สระบุรี', '1');
INSERT INTO `province` VALUES (23, 'สระแก้ว', '1');
INSERT INTO `province` VALUES (24, 'สิงห์บุรี', '1');
INSERT INTO `province` VALUES (25, 'สุพรรณบุรี', '1');
INSERT INTO `province` VALUES (26, 'อ่างทอง', '1');
INSERT INTO `province` VALUES (27, 'กระบี่', '2');
INSERT INTO `province` VALUES (28, 'ชุมพร', '2');
INSERT INTO `province` VALUES (29, 'ตรัง', '2');
INSERT INTO `province` VALUES (30, 'นครศรีธรรมราช', '2');
INSERT INTO `province` VALUES (31, 'นราธิวาส', '2');
INSERT INTO `province` VALUES (32, 'ปัตตานี', '2');
INSERT INTO `province` VALUES (33, 'พังงา', '2');
INSERT INTO `province` VALUES (34, 'พัทลุง', '2');
INSERT INTO `province` VALUES (35, 'ภูเก็ต', '2');
INSERT INTO `province` VALUES (36, 'ระนอง', '2');
INSERT INTO `province` VALUES (37, 'ยะลา', '2');
INSERT INTO `province` VALUES (38, 'สงขลา', '2');
INSERT INTO `province` VALUES (39, 'สตูล', '2');
INSERT INTO `province` VALUES (40, 'สุราษฏร์ธานี', '2');
INSERT INTO `province` VALUES (41, 'กาฬสินธุ์', '6');
INSERT INTO `province` VALUES (42, 'ขอนแก่น', '6');
INSERT INTO `province` VALUES (43, 'ชัยภูมิ', '6');
INSERT INTO `province` VALUES (44, 'นครพนม', '6');
INSERT INTO `province` VALUES (45, 'นครราชสีมา', '6');
INSERT INTO `province` VALUES (46, 'บุรีรัมย์', '6');
INSERT INTO `province` VALUES (47, 'เลย', '6');
INSERT INTO `province` VALUES (48, 'ยโสธร', '6');
INSERT INTO `province` VALUES (49, ' ร้อยเอ็ด', '6');
INSERT INTO `province` VALUES (50, 'มหาสารคาม', '6');
INSERT INTO `province` VALUES (51, 'มุกดาหาร', '6');
INSERT INTO `province` VALUES (52, 'สกลนคร', '6');
INSERT INTO `province` VALUES (53, 'หนองคาย', '6');
INSERT INTO `province` VALUES (54, 'หนองบัวลำภู', '6');
INSERT INTO `province` VALUES (55, 'ศรีสะเกษ', '6');
INSERT INTO `province` VALUES (56, 'สุรินทร์', '6');
INSERT INTO `province` VALUES (57, 'อุดรธานี', '6');
INSERT INTO `province` VALUES (58, 'อำนาจเจริญ', '6');
INSERT INTO `province` VALUES (59, 'อุบลราชธานี', '6');
INSERT INTO `province` VALUES (60, 'กำแพงเพชร', '5');
INSERT INTO `province` VALUES (61, 'ตาก', '5');
INSERT INTO `province` VALUES (62, 'นครสวรรค์', '5');
INSERT INTO `province` VALUES (63, 'น่าน', '5');
INSERT INTO `province` VALUES (64, 'พิจิตร', '5');
INSERT INTO `province` VALUES (65, 'พิษณุโลก', '5');
INSERT INTO `province` VALUES (66, 'พะเยา', '5');
INSERT INTO `province` VALUES (67, 'เชียงใหม่', '5');
INSERT INTO `province` VALUES (68, 'เชียงราย', '5');
INSERT INTO `province` VALUES (69, 'เพชรบูรณ์', '5');
INSERT INTO `province` VALUES (70, 'แพร่', '5');
INSERT INTO `province` VALUES (71, 'แม่ฮ่องสอน', '5');
INSERT INTO `province` VALUES (72, 'ลำปาง', '5');
INSERT INTO `province` VALUES (73, 'ลำพูน', '5');
INSERT INTO `province` VALUES (74, 'สุโขทัย', '5');
INSERT INTO `province` VALUES (75, 'อุตรดิตถ์', '5');
INSERT INTO `province` VALUES (76, 'อุทัยธานี', '5');


โค้ดเต็มสำหรับทดสอบ
 

<?php   
// ทำการเชิ่อมต่อฐานข้อมูล   
$link=mysql_connect("localhost","root","test") or die("error".mysql_error());   
mysql_select_db("test",$link) or  die ('Can't use Database : ' . mysql_error());;    
?>  
<?php
// ส่วนของการกำหนดค่า
$setContainBox=500; // ความกว้างของพื้นที่เนื้อหา
$setNumColumn=2; //จำนวนคอลัมน์ที่ต้องการแสดง
$setNumRow=3; // จำนวนแถวที่ต้องการแสดง
$setHeightColumn=75; //ความสูงของแต่ละแถว
$setMarginColumn=2; // ระยะห่างระหว่างแถวและระหว่างคอลัมน์
$setWidthBorder=1; // ความกว้างเส้นขอบ
$setWidthColumn=($setContainBox/$setNumColumn)-(($setMarginColumn*$setNumColumn)+($setWidthBorder*$setNumColumn)*2);
?>
<!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>learn mysql function</title>
 <style type="text/css">
body{   
	font-size:12px;   
}   
/* css ส่วนตัวเลขแสดงการแบ่งหน้า */
.mynavi{
	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#99CC33;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
}
/* css ส่วนตัวเลขแสดงการแบ่งหน้า กรณีเมาส์ over หรืออยู่ในหน้านั้น */
.mynavi:hover,.mynavi_active{
	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
}
/* css ส่วนกำหนดรายละเอียดจำนวนหน้า */
.pgnavi{
	display:block;
	height:25px;
	font-size:12px;
	line-height:20px;
	float:left;
	margin-left:50px;
	margin-right:3px;
}
/* css ส่วนพื้นที่เนื้อหา มีการรับค่าจากตัวแปร PHP */
.showInColumn{
	display:block;
	list-style:none;
	margin:0;
	padding:0;
	width:<?=$setContainBox?>px;
	background-color:#FCC;
}
/* css ส่วนพื้นที่เนื้อหาลิสรายการ มีการรับค่าจากตัวแปร PHP */
.listColumn{
	display:block;
	margin:<?=$setMarginColumn?>px;
	height:<?=$setHeightColumn?>px;
	width:<?=$setWidthColumn?>px;
	float:left;  
	border:<?=$setWidthBorder?>px solid #CCC;
}
  </style> 


</head>

<body>
<?php
	// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
	function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){
		echo "<span class=pgnavi>".$before_p." to ".$plus_p." of ".$total." |  Go to Page</span> ";
		for($i=0;$i<$total_p;$i++){
			$now_class=($chk_page==$i)?"mynavi_active":"mynavi";			
			echo "<a class='".$now_class."' href='?s_page=$i'>".intval($i+1)."</a> ";
		}
	}
?>

<?php
$q="select * from province ";  // แก้ไขขื่อตารางตามต้องการ
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=$setNumRow*$setNumColumn;	// กำหนด จำนวนรายการที่แสดงในแต่ละหน้า
if(!isset($_GET['s_page'])){
	$_GET['s_page']=0;
}else{
	$chk_page=$_GET['s_page'];	
	$_GET['s_page']=$_GET['s_page']*$e_page;
}
$q.=" limit ".$_GET['s_page'].",$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;

?>

<?
mysql_set_charset("utf8",$link);
$q="select * from province limit ".$_GET['s_page'].",$e_page"; // แก้ไขขื่อตารางตามต้องการ
$qr=mysql_query($q);
echo "<ul class='showInColumn'>";
while($rs=mysql_fetch_array($qr)){
	//  echo $rs['name_province']."<br>";	
?>
<li class='listColumn'><?=$rs['name_province']?></li>
<?php	
}
echo "</ul>";
mysql_close($link);
?>

<br style="clear:both;" />
<br style="clear:both;" />
 <?php
 // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
  page_navigator($before_p,$plus_p,$total,$total_p,$chk_page); 
  ?> 

</body>
</html>

 


Tags:: css php แบ่งหน้า





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