การแบ่งหน้า การพิมพ์ สำหรับข้อมูลต่อเนื่อง ด้วย css อย่างง่าย

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
พิมพ์ css แบ่งหน้า

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





ในกรณีที่เรามีรูปแบบ ข้อมูลที่ต้องการพิมพ์ มีการแสดงผลข้อมูลแบบต่อเนื่อง
แต่เราต้องการพิมพ์ข้อมูลโดย ให้ บราวเซอร์แบ่งหน้าให้โดยอัตโนมัติ ตามขอบเขต
ของข้อมูลที่เรากำหนด เพื่อให้สะดวกในการพิมพ์ข้อมูลได้ง่าย

ตัวอย่างโค้ดสำหรับทดสอบ
 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
<title>css print report table continue</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
}
html {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	color:#000000;
}
body {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	padding:0;
	margin:0;
	color:#000000;
}
.headTitle {
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
}
.headerTitle01 {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
.headerTitle01_r {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล  */
.box_data1 {
	font-family:Arial, "times New Roman", tahoma;
	height:18px;
	border:0px dotted #333333;
	border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */
.left_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
	border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
	display:block;
	width:10px;
	height:10px;
	overflow:hidden;
	border:1px solid #000;
}
/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */
@media all
{
	.page-break	{ display:none; }
	.page-break-no{ display:none; }
}
@media print
{
	.page-break	{ display:block;height:1px; page-break-before:always; }
	.page-break-no{ display:block;height:1px; page-break-after:avoid; }	
}
</style>
</head>

<body>
<?php for($i=1;$i<=5;$i++){ ?>
<div class="page-break<?=($i==1)?"-no":""?>">&nbsp;</div>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">Page <?=$i?></td>
  </tr>
  <tr>
    <td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
      RECEIPT FOR BULK POSTING <br /></td>
  </tr>
  <tr>
    <td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ไปรษณียภัณฑ์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ลงทะเบียน</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับรอง</td>
        </tr>
        <tr>
          <td>ได้รับฝาก</td>
          <td align="center">&nbsp;</td>
          <td align="left">Letter-Post items</td>
          <td align="center">&nbsp;</td>
          <td align="left">Registered</td>
          <td>&nbsp;</td>
          <td align="left">Certified</td>
        </tr>
        <tr>
          <td>Received</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">พัสดุไปรษณีย์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับประกัน</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="center">&nbsp;</td>
          <td align="left">Parcels</td>
          <td align="center">&nbsp;</td>
          <td align="left">Insured</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
        </tr>
        <tr>
          <td>จาก
            <input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;"   /></td>
          <td align="center">As Follows Date Stamp</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">From</td>
  </tr>
  <tr>
    <td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
        <tr>
          <td width="50" rowspan="2" class="headerTitle01"  align="center" valign="middle">ลำดับ<br />
            No.</td>
          <td width="200" rowspan="2" class="headerTitle01"    align="center" valign="middle">นามผู้รับ<br />
            Name Of Addressee</td>
          <td width="130" rowspan="2" class="headerTitle01"    align="center" valign="middle">ปลายทาง<br />
            Destination</td>
          <td width="70" rowspan="2" class="headerTitle01"   align="center" valign="middle">เลขที่<br />
            Number</td>
          <td width="100" rowspan="2" class="headerTitle01"    align="center" valign="middle">น้ำหนัก (กรัม)<br />
            Weight (Grammes)</td>
          <td colspan="2" class="headerTitle01"    align="center" valign="bottom">ค่าบริการ<br />
            Postal Charge</td>
          <td width="100" rowspan="2" class="headerTitle01_r"   align="center" valign="middle">หมายเหตุ<br />
            Remarks</td>
        </tr>
        <tr>
          <td width="70"   align="center" valign="bottom" class="headerTitle01">บาท<br />
            Baht</td>
          <td width="30" class="headerTitle01"   align="center" valign="bottom">สต.
            Stg.</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">1</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">2</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">3</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">4</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">5</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">6</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">7</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">8</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">9</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">10</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น 
            Total
            <input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;"   />
            ฉบับ/ห่อ
            Pieces</td>
          <td align="center" style="border-top:2px solid #000;">เป็นเงิน 
            Amount</td>
          <td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" style="border-top:2px solid #000;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
            การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
          <td width="50%" align="left">&nbsp;</td>
        </tr>
        <tr>
          <td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
            มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
          <td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="100" align="right">พนักงานรับฝาก</td>
                <td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;"   /></td>
              </tr>
              <tr>
                <td align="right">Counter Clerk</td>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<?php } ?>
</body>
</html>

ตัวอย่างโค้ดข้างต้น เป็นการสมมติ การวนลูปแสดงข้อมูลอย่างต่อเนื่อง
โดยมีการกำหนด ส่วนสำหรับแบ่งการพิมพ์ ด้วย โค้ด PHP ร่วมกับ CSS
 

<div class="page-break<?=($i==1)?"-no":""?>">&nbsp;</div>

ซึ่งหมายถึง ถ้าเป็น ข้อมูลแรก $i==1 ให้แสดง
div ที่มี class เท่ากับ page-break-no คือยังไม่ต้องเริ่มทำการแบ่งหน้าสำหรับพิมพ์
แต่ถ้าข้อมูลที่ไม่ใช่ข้อมูลแรก ให้เริ่มทำการแบ่งหน้าสำหรับการพิมพ์ด้วย การกำหนด
div ให้มี class เท่ากับ page-break

ทดสอบตัวอย่างตามลิ้งค์ด้านล่าง
http://www.ninenik.com/demo/css_report_table2.php
เมื่อเข้าไปที่หน้าดังกล่าว แล้วให้คลิกขวา แล้วเลือก print preview
จะเห็นว่า แม้ข้อมูลที่แสดง จะเรียกต่อเนื่องกัน
แต่ข้อมูลสำหรับการพิมพ์ จะมีการแบ่งหน้าให้อัตโนมัติ ตามตำแหน่งที่เรากำหนด



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 24-02-2019


การประยุกต์กับรายการข้อมูลที่ดึงจากฐานข้อมูล 

    ในที่นี้ เราจะใช้ข้อมูลทดสอบ ตามลิ้งค์ด้านล่าง สำหรับใช้งานร่วมกับการแสดง
ข้อมูลในตาราง ที่รองรับการแบ่งหน้าการพิมพ์ ได้
 
    ข้อมูลทดสอบ จะเป็นข้อมูลของชื่อจังหวัดทั้ง 77 ของประเทศไทย โดยสมมติให้เป็น
รายการข้อมูลที่ถูกดึงมาแสดง
 
รูปแบบที่ 1 คือ ตารางที่มีส่วนของ header และ footer ในทุกๆ หน้า
    โดยในแต่ละหน้า จะแสดง header ,repeat content และ footer
 
 

 
 
เพื่อให้รายการที่อยู่ในส่วนของ repeat content แสดงข้อมูลเต็มพื้นที่การใช้งานของกระดาษ เราต้องกำหนด
ก่อนว่า จะให้มีรายการได้สูงสุดกี่รายการ 
 

ตัวอย่างไฟล์ dbconnect.php

<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */ 
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}
 

ไฟล์โค้ดตัวอย่างรูปแบบที่ 1 ดูส่วนของโค้ดที่ highlight

<?php
require_once("inc/dbconnect.php"); // ไฟล์เชือมต่อฐานข้อมูล
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
<title>css print report table continue</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    font-family:Arial, "times New Roman", tahoma;
    font-size:12px;
}
html {
    font-family:Arial, "times New Roman", tahoma;
    font-size:12px;
    color:#000000;
}
body {
    font-family:Arial, "times New Roman", tahoma;
    font-size:12px;
    padding:0;
    margin:0;
    color:#000000;
}
.headTitle {
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
}
.headerTitle01 {
    border:1px solid #333333;
    border-left:2px solid #000;
    border-bottom-width:2px;
    border-top-width:2px;
    font-size:11px;
}
.headerTitle01_r {
    border:1px solid #333333;
    border-left:2px solid #000;
    border-right:2px solid #000;
    border-bottom-width:2px;
    border-top-width:2px;
    font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล  */
.box_data1 {
    font-family:Arial, "times New Roman", tahoma;
    height:18px;
    border:0px dotted #333333;
    border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */
.left_bottom {
    border-left:2px solid #000;
    border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
    border-left:2px solid #000;
    border-bottom:1px solid #000;
    border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
    display:block;
    width:10px;
    height:10px;
    overflow:hidden;
    border:1px solid #000;
}
/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */
@media all
{
    .page-break { display:none; }
    .page-break-no{ display:none; }
}
@media print
{
    .page-break { display:block;height:1px; page-break-before:always; }
    .page-break-no{ display:block;height:1px; page-break-after:avoid; } 
}
</style>
</head>
 
<body>
<?php
$total_page_data = 0;  // เก็บจำนวนหน้า รายการทั้งหมด
$total_page_item = 30; // จำนวนรายการที่แสดงสูงสุดในแต่ละหน้า
$total_page_item_all = 0; // ไว้เก็บจำนวนรายการจริงทั้งหมด
$arr_data_set=array(array()); // [][];
$sql = "
SELECT * FROM tbl_provinces
";
$i=1;
$result = $mysqli->query($sql);
if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
	$total_page_item_all = $result->num_rows; // จำนวนรายการทั้งหมด
	$total_page_data = ceil($total_page_item_all/$total_page_item); // หาจำนวนหน้าจากรายการทั้งหมด
    while($row = $result->fetch_assoc()){ // วนลูปแสดงรายการ		
		$arr_data_set['province_id'][$i]=$row['province_id'];
        $arr_data_set['province_name'][$i]=$row['province_name'];
		$i++;
    }   
}
?>
<?php for($i=1;$i<=$total_page_data;$i++){ ?>
<div class="page-break<?=($i==1)?"-no":""?>">&nbsp;</div>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">Page <?=$i?></td>
  </tr>
  <tr>
    <td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
      RECEIPT FOR BULK POSTING <br /></td>
  </tr>
  <tr>
    <td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ไปรษณียภัณฑ์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ลงทะเบียน</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับรอง</td>
        </tr>
        <tr>
          <td>ได้รับฝาก</td>
          <td align="center">&nbsp;</td>
          <td align="left">Letter-Post items</td>
          <td align="center">&nbsp;</td>
          <td align="left">Registered</td>
          <td>&nbsp;</td>
          <td align="left">Certified</td>
        </tr>
        <tr>
          <td>Received</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">พัสดุไปรษณีย์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับประกัน</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="center">&nbsp;</td>
          <td align="left">Parcels</td>
          <td align="center">&nbsp;</td>
          <td align="left">Insured</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
        </tr>
        <tr>
          <td>จาก
            <input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;"   /></td>
          <td align="center">As Follows Date Stamp</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">From</td>
  </tr>
  <tr>
    <td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
        <tr>
          <td width="50" rowspan="2" class="headerTitle01"  align="center" valign="middle">ลำดับ<br />
            No.</td>
          <td width="200" rowspan="2" class="headerTitle01"    align="center" valign="middle">นามผู้รับ<br />
            Name Of Addressee</td>
          <td width="130" rowspan="2" class="headerTitle01"    align="center" valign="middle">ปลายทาง<br />
            Destination</td>
          <td width="70" rowspan="2" class="headerTitle01"   align="center" valign="middle">เลขที่<br />
            Number</td>
          <td width="100" rowspan="2" class="headerTitle01"    align="center" valign="middle">น้ำหนัก (กรัม)<br />
            Weight (Grammes)</td>
          <td colspan="2" class="headerTitle01"    align="center" valign="bottom">ค่าบริการ<br />
            Postal Charge</td>
          <td width="100" rowspan="2" class="headerTitle01_r"   align="center" valign="middle">หมายเหตุ<br />
            Remarks</td>
        </tr>
        <tr>
          <td width="70"   align="center" valign="bottom" class="headerTitle01">บาท<br />
            Baht</td>
          <td width="30" class="headerTitle01"   align="center" valign="bottom">สต.
            Stg.</td>
        </tr>
        <?php
		// ส่วนของ repeat content
		for($v=1;$v<=$total_page_item;$v++){
			$item_i=(($i-1)*$total_page_item)+$v;
			$_province_name = isset($arr_data_set['province_name'][$item_i])?$arr_data_set['province_name'][$item_i]:"";
			$item_i = isset($arr_data_set['province_name'][$item_i])?$item_i:"";
		?>
        <tr>
          <td height="20" align="center" class="left_bottom"><?=$item_i?></td>
          <td align="left" class="left_bottom">&nbsp;
		  <?=$_province_name?>
          </td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <?php } ?>
        <tr>
          <td height="20" align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น 
            Total
            <input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;"   />
            ฉบับ/ห่อ
            Pieces</td>
          <td align="center" style="border-top:2px solid #000;">เป็นเงิน 
            Amount</td>
          <td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" style="border-top:2px solid #000;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
            การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
          <td width="50%" align="left">&nbsp;</td>
        </tr>
        <tr>
          <td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
            มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
          <td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="100" align="right">พนักงานรับฝาก</td>
                <td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;"   /></td>
              </tr>
              <tr>
                <td align="right">Counter Clerk</td>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<?php } ?>
</body>
</html>
 
ค่าที่เราต้องการคือ ข้อมูลทั้งหมดแบ่งได้กี่หน้า
และข้อมูลแต่ละหน้า แสดงได้ไม่เกินกี่รายการ 
 
<?php
$total_page_data = 0;  // เก็บจำนวนหน้า รายการทั้งหมด
$total_page_item = 30; // จำนวนรายการที่แสดงสูงสุดในแต่ละหน้า
$total_page_item_all = 0; // ไว้เก็บจำนวนรายการจริงทั้งหมด
.......
// และเมื่อ หาจำนวนหน้าจากรายการทั้งหมด
$total_page_item_all = $result->num_rows; // จำนวนรายการทั้งหมด
$total_page_data = ceil($total_page_item_all/$total_page_item); 
?>
 
แนวทางการนำข้อมูลจากฐานข้อมูล มาใช้ในลูปของ repeat เราจะใช้ การใช้งาน array มาช่วย โดยจะ
ให้ ลำดับของรายการที่เริ่มจาก 1 เป็นต้นไป เป็น key ของ array หลัก
    การวนลูป จะมีสองส่วน ส่วนแรก คือลูปของ รายการแต่ละหน้า ใช้ตัวแปร $i  ลูปที่สอง จะเป็นลูปของ
รายการข้อมูลในส่วนของ repeat content ของแต่ละหน้า ใช้ตัวแปร $v
 
ทบทวนส่วนของข้อมูล array จากส่วนของโค้ด ดังนี้
 
<?php
$total_page_data = 0;  // เก็บจำนวนหน้า รายการทั้งหมด
$total_page_item = 30; // จำนวนรายการที่แสดงสูงสุดในแต่ละหน้า
$total_page_item_all = 0; // ไว้เก็บจำนวนรายการจริงทั้งหมด
$arr_data_set=array(array()); // [][];
$sql = "
SELECT * FROM tbl_provinces
";
$i=1;
$result = $mysqli->query($sql);
if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
	$total_page_item_all = $result->num_rows; // จำนวนรายการทั้งหมด
	$total_page_data = ceil($total_page_item_all/$total_page_item); // หาจำนวนหน้าจากรายการทั้งหมด
    while($row = $result->fetch_assoc()){ // วนลูปแสดงรายการ		
		$arr_data_set['province_id'][$i]=$row['province_id'];
        $arr_data_set['province_name'][$i]=$row['province_name'];
		$i++;
    }   
}
?>
 
เรากำหนดตัวแปร $arr_data_set เป็น array 2 มิติ  โดย key ของมิติแรก เราใช้เป็นชื่อฟิลด์ของข้อมูลที่แสดง
key ของมิติที่สอง เราใช้ ลำดับของรายการที่เริ่มจาก 1  ในตัวอย่างเราแสดงแค่สองค่าคือ ค่า provice_id 
และ province_name ถ้าเราต้องการค่าอื่นเพิ่ม ก็ให้กำหนดเพิ่มเข้าไป สมมติต้องการ province_code
 
$arr_data_set['province_code'][$i]=$row['province_code'];
 
ส่วนในขั้นตอนการนำไปแสดง 
 
<?php
// ส่วนของ repeat content
for($v=1;$v<=$total_page_item;$v++){
	$item_i=(($i-1)*$total_page_item)+$v;
	$_province_name = isset($arr_data_set['province_name'][$item_i])?$arr_data_set['province_name'][$item_i]:"";
	$item_i = isset($arr_data_set['province_name'][$item_i])?$item_i:"";
?>
<tr>
  <td height="20" align="center" class="left_bottom"><?=$item_i?></td>
  <td align="left" class="left_bottom">&nbsp;
  <?=$_province_name?>
  </td>
  <td align="left" class="left_bottom">&nbsp;</td>
  <td align="left" class="left_bottom">&nbsp;</td>
  <td align="left" class="left_bottom">&nbsp;</td>
  <td align="left" class="left_bottom">&nbsp;</td>
  <td align="left" class="left_bottom">&nbsp;</td>
  <td align="left" class="left_right_bottom">&nbsp;</td>
</tr>
<?php } ?>
 
ตัวแปร $item_i จะเป็น key มิติที่สอง เป็นค่าลำดับของรายการ ใช้สำหรับอ้างอิง
สำหรับค่าที่จะใช้งาน จะมีการตรวจสอบตัวแปร และกำหนดค่าในตัวแปรใหม่
 
$_province_name = isset($arr_data_set['province_name'][$item_i])?$arr_data_set['province_name'][$item_i]:"";
 
ทั้งนี้เพราะจำนวน key ลำดับที่สอง กับจำนวนรายการจริง อาจจะไม่เท่ากัน เช่น สมมติมีจำนวนหน้าทั้งหมด
3 หน้า นั้นหมายถึงจำนวน item_i จะเท่ากับ 30x3 เท่ากับ 90 รายการ 
ส่วน key ของรายการจริง จะมีแค่ 77 ตามจำนวนจริง ดังนั้น ก่อนเรียกใช้งาน เราต้องตรวจสอบค่า key ที่มากกว่า
77 โดยให้เป็นค่าว่าง 
 
ตัวอย่าง ถ้า key เท่ากับ 78 จะเป็น 
 
$arr_data_set['province_name'][78]
 
ซึ่งค่าข้างต้นจะไม่มีตัวแปรที่ key นี้ เราจึงต้องเช็ค ว่า
 
isset($arr_data_set['province_name'][$item_i])  // ถ้ามีค่าของ key นี้ จึงจะเรียกใช้งาน
 
ดูตัวอย่างที่ DEMO 2
 





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







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









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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ