สอบถามเกี่ยวกับการสร้างเงื่อนไขในการให้ตารางโชว์ข้อมูลแบ่งหน้าไปอีก tab

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับการสร้างเงื่อนไขในการให้ตารางโชว์ข้อมูลแบ่งหน้าไปอีก tab

แนวคิดประมาณนี้ครับจะมีปุ่มที่สามารถเปิดไปอีก tab นึงได้กรณี row ที่ดึงมามากกว่า 10 ครับ แล้วแบ่งแสดงตามตย. รูปด้านบนเลยครับ

<div align="center"><table width="90%" border="1" cellspacing="0">
<tr>
    <td width="3%"><div align="center">No.</div></td>
    <td width="5%"><div align="center">Account code</div></td>
    <td width="30%"><div align="center">Order & Detail</div></td>
    <td width="5%"><div align="center">Unit price</div></td>
    <td width="5%"><div align="center">QTY Unit</div></td>
    <td width="5%"><div align="center">Price</div></td>
</tr>

<?php
$i=0;
	while($i<$num3 && $data3 = $result3->fetch_assoc())
	{$i++;
	//แต่ละ input ฝัง echo $i; เพื่อที่จะได้เจาะจง row ในแต่ละการใช้งาน 
?>

<tr class="noBorder">
	<td width="3%"><center><input type="hidden" name="txtNo[]" value="<?php echo $i;?>">
	<?php echo $i; ?></center></td>
    <td width="5%"><center><input type="text" name="txtACC[]" id="txtACC[<?php echo $i;?>]" size='25' />
    </center></td>
    <td width="30%"><center><input type="hidden" name="txtDetail[]" id="txtDetail[<?php echo $i;?>]" 
    value ="<?php echo $data3["orders"];?>"/><?php echo $data3["orders"];?></center></td>
    <td width="5%"><center><input type="text" name="txtUnit[]" id="txtUnit[<?php echo $i;?>]" size='6' 
    onChange="fncUnitAlert(<?php echo $i;?>)" /></center></td>
	<td width="5%"><center><input type="hidden" name="txtQTY[]" id="txtQTY[<?php echo $i;?>]" 
    value ="<?php echo $data3["amount"];?>"/><?php echo $data3["amount"];?></center></td>
	<td width="5%"><center><div id=txtPrice<?php echo $i; ?> ></div>
    <input type="hidden" name="txtPrice[]" id="txtPrice[<?php echo $i;?>]" value=""/>
	</center></td>
</tr>
<tr class="noBorder">
	<td width="3%"></td>
    <td width="5%"></td>
	<td width="30%"><center><input type="text" name="txtSubdet[]" id="txtSubdet[<?php echo $i;?>]" size='80'/></center></td>
	<td width="5%"></td>
    <td width="5%"></td>
    <td width="5%"></td>
</tr>

<?php
	}
?>




เมื่อ i=10 แล้วอยากให้มีปุ่มโผล่ขึ้นมาเพื่อไปดูข้อมูลเพิ่มเติมในอีก tab ครับ
โดยแบ่งเป็นหน้าฟอร์มหลัก โชว์ row 1-10 และ new tab เป็นตารางที่โชว์ข้อมูลตั้งแต่ row 10 ขึ้นไปครับ

Natchaphon Jumnakros 21-08-2019 13:52:35

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 1

ดูกตัวอย่างโค้ดต่อไปนี้เป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<style>
  .row_more_10{
    display:none;
  }
  </style>
<table>
<?php
$total = 15;
 for($i=1;$i<=$total;$i++){?>
	<tr class="<?=($i>10)?"row_more_10":"row_less_10"?>">
	<td>row data <?=$i?></td>
	</tr>
<?php } ?>	
</table>
<?php if($total>10){?>
  <button type="button" id="bt_01">1 - 10</button>
  <button type="button" id="bt_02">10 ++</button>
  <?php } ?>
  <script>
  $(function(){
    $("#bt_01").click(function(){
      $(".row_less_10").show();
      $(".row_more_10").hide();
    });
    $("#bt_02").click(function(){
      $(".row_less_10").hide();
      $(".row_more_10").show();
    });    
  });
  </script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 21-08-2019

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

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

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