เกี่ยวกับการต่อยอดโค้ดจาก template ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เกี่ยวกับการต่อยอดโค้ดจาก template ครับ

เกี่ยวกับการต่อยอดโค้ดจาก template ครับ

template จากเว็บ https://datatables.net/examples/api/select_row.html

ผมจะต่อยอดโดยการให้ row ที่ถูกเลือก ถูกดึงข้อมูลไปแสดงหน้าต่อไปผ่านปุ่ม Submit ครับ

<script>
$(document).ready(function() {
    var table = $('#myTable').DataTable();
 
    $('#myTable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 
    $('#button').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );
} );
</script>
<script>
	$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
</head>
<body>
<form action="T5.php" name="frmSubmit" method="post">
<table width="75%" border="1" id="myTable" class="display" >
<thead>
  <tr>
  	<th width="5%"><div align="center">No.</div></th>
    <th width="10%"><div align="center">ACCOUNT CODE</div></th>
    <th width="25%"><div align="center">ITEM NAME</div></th>
  </tr>
</thead>
<tbody>

<?php
	 
$i=0;

while($i<$numr && $ven2 = $ven->fetch_assoc())
{
	
?>

<tr> 
  <td><center><input type="hidden" name="txtID[<?php echo $ven2["id"];?>]" id="txtID" 
  value="<?php echo $ven2["id"];?>"><?php echo $ven2["id"];?></center></td>
  <td><center><input type="hidden" name="txtACC[<?php echo $ven2["id"];?>]" id="txtACC" 
  value="<?php echo $ven2["acc_name"];?>"><?php echo $ven2["acc_name"];?></center></td>
  <td><input type="hidden" name="txtITM[<?php echo $ven2["id"];?>]" id="txtITM" 
  value="<?php echo $ven2["item_name"];?>"><?php echo $ven2["item_name"];?></td>
</tr>
<?php
}
?>
 
</tbody> 
</table>
<div align="center">
<input type="submit" value="Submit">
<input type=button onClick='window.history.back()' value='Back'>
</div> 
</form>

</body>
</html>

ในส่วนของ

$('#button').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );

ผมสามารถปรับจากเดิมที่เป็นกดปุ่มแล้วนับ row เป็นกดปุ่มแล้วดึงข้อมูลที่ถูกเลือกไปยังอีกหน้า เหมือน action ปกติได้ไหมครับ
หรือว่ามีวิธีไหนแนะนำ รบกวนด้วยครับ

Natchaphon Jumnakros 110.170.68.xxx 06-08-2019 11:55:50

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

ดูโค้ดตัวอย่างนี้เป็นแนทาง คำอธิบายแสดงในโค้ด เป็นการประยุกต์สร้าง element แล้วไปเก็บไว้
ก่อนนำไปใช้งานเมื่อ submt

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" >
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" >
</head>

<body>

<div style="width:600px;margin:auto;">
<form action="" name="frmSubmit" method="post">
<table width="75%" border="1" id="myTable" class="display" >
<thead>
  <tr>
    <th width="5%"><div align="center">No.</div></th>
    <th width="10%"><div align="center">ACCOUNT CODE</div></th>
    <th width="25%"><div align="center">ITEM NAME</div></th>
  </tr>
</thead>
<tbody>
 
<?php
      
$i=0;
 
 // จำลองข้อมูลทดสอบ วนลูป
foreach(range("A","Z") as $k_=>$v_){
	$i++;  
?>
 <!-- เก็บค่าที่จะใช้งานไว้ใน data attribute  -->
<tr data-txtid="<?php echo $k_;?>" 
data-txtacc="CODE <?php echo $v_?>" 
data-txtitm="ITEM NAME <?php echo $v_;?>"> 
  <td><center><?php echo $i;?></center></td>
  <td><center>CODE <?php echo $v_?></center></td>
  <td>ITEM NAME <?php echo $v_;?></td>
</tr>
<?php
}
?>
  
</tbody> 
</table>
<div align="center">

 <!-- สร้าง element ที่จะเก็บข้อมูลที่สร้างเมื่อคลิกเลือกรายการ   -->
<div id="place_gen_element"></div>

<input type="submit" value="Submit">
<input type="button" onClick="window.location='<?=basename(__FILE__)?>'" value="Back">
</div> 
</form>

<pre>
<?php
// ทดสอบ ค่าที่ส่งมา ทั้งหมด
print_r($_POST);
// เช็คว่ามีการกดเลือก รายการมาหรือไม่
if(isset($_POST['txtID']) && count($_POST['txtID'])>0){
	foreach($_POST['txtID'] as $k_unique=>$v_value){
		echo $k_unique." - ".$v_value."<br>";		
		// ใช้ unique เป็น key สำหรับเรียกข้อมูลอื่นๆ ที่เป็น key เดียวกัน มาใช้งาน
		echo $_POST['txtACC'][$k_unique]."<br>";
		echo $_POST['txtITM'][$k_unique]."<br>";
		echo "<hr>";
	}
}  
?>
</pre>

</div>


<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
	var table = $('#myTable').DataTable();

	$('#myTable tbody').on( 'click', 'tr', function () {
		$(this).toggleClass('selected');
		if($(this).hasClass("selected")){ // ถ้าเป็นการคลิกเลือกแถวรายการใดๆ 
			// ดึงค่าจาก data attribute ของแถวรายการที่เลือก
			var key_unique = $(this).data('txtid');
			var accValue = $(this).data('txtacc');
			var tmValue = $(this).data('txtitm');		
			// สร้าง form element ที่ต้องการ
			var  ele1 = '<input type="hidden" name="txtID['+key_unique+']" value="'+key_unique+'">';
			var ele2 = '<input type="hidden" name="txtACC['+key_unique+']" value="'+accValue+'">';
			var ele3 = '<input type="hidden" name="txtITM['+key_unique+']" value="'+tmValue+'">';
			// นำ element ที่เราสร้างไปไว้ที่ div ที่เราสร้างไว้สำหรับนำไปใช้งาน
			$("#place_gen_element").append(ele1+ele2+ele3);				
		}else{ // ถ้าเป็นยกเลิกการเลือก
			// ลบ element ที่สร้าง ที่มีชื่อลงท้ายด้วยค่า unique ที่ตรงกับ แถวที่เลือก ออกจากฟอร์ม
			$("input[name$='["+$(this).data("txtid")+"]']").remove();
		}

		
	} );

	$('#button').click( function () {
		alert( table.rows('.selected').data().length +' row(s) selected' );
	} );


	
} );
</script>
<script>
    $(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
</body>
</html>

บทความแนะนำที่เกี่ยวข้อง
แนวทางการส่งค่า จาก checkbox เพื่อบันทึกข้อมูลแบบ array ใน php	อ่าน 33,228
ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attribute	อ่าน 10,002

ninenik 122.155.35.xxx 06-08-2019

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

ผมลองปรับตาม ตย. แล้วรันดูครับแต่ค่าไม่แสดงในอีกเพจครับ
หน้า INDEX ครับ

<html>
<?php
SESSION_START();
require_once('config.php');
require_once('class/class.upload.php') ;

	$ven = $conn->query("SELECT * FROM itemforuser ");
	$numr = $ven->num_rows;
?>
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" >
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" >
</head>
 
<body>
 
<div style="width:500px;margin:auto;">
<form action="Test3.php" name="frmSubmit" method="post">
<table width="75%" border="1" id="myTable" class="display" >
<thead>
  <tr>
    <th width="5%"><div align="center">No.</div></th>
    <th width="10%"><div align="center">ACCOUNT CODE</div></th>
    <th width="25%"><div align="center">ITEM NAME</div></th>
  </tr>
</thead>
<tbody>
  
<?php
       
$i=0;
  
while($i<$numr && $ven2 = $ven->fetch_assoc())
{
	
?>

<tr> 
  <td><center><input type="hidden" name="txtID[<?php echo $ven2["id"];?>]" id="txtID" 
  value="<?php echo $ven2["id"];?>"><?php echo $ven2["id"];?></center></td>
  <td><center><input type="hidden" name="txtACC[<?php echo $ven2["id"];?>]" id="txtACC" 
  value="<?php echo $ven2["acc_name"];?>"><?php echo $ven2["acc_name"];?></center></td>
  <td><input type="hidden" name="txtITM[<?php echo $ven2["id"];?>]" id="txtITM" 
  value="<?php echo $ven2["item_name"];?>"><?php echo $ven2["item_name"];?></td>
</tr>
<?php
}
?>
   
</tbody> 
</table>
<div align="center">
 
<!-- สร้าง element ที่จะเก็บข้อมูลที่สร้างเมื่อคลิกเลือกรายการ   -->
<div id="data_element"></div>
<input type="submit" value="Submit">
<input type="button" onClick="window.location='<?=basename(__FILE__)?>'" value="Back">
</div> 
</form>
 
<pre>
<?php

// เช็คว่ามีการกดเลือก รายการมาหรือไม่
if(isset($_POST['txtID']) && count($_POST['txtID'])>0){
    foreach($_POST['txtID'] as $k_unique=>$v_value){
        echo $k_unique." - ".$v_value."<br>";     
        // ใช้ unique เป็น key สำหรับเรียกข้อมูลอื่นๆ ที่เป็น key เดียวกัน มาใช้งาน
        echo $_POST['txtACC'][$k_unique]."<br>";
        echo $_POST['txtITM'][$k_unique]."<br>";
        echo "<hr>";
    }
}  
?>
</pre>
 
</div>
 
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
    var table = $('#myTable').DataTable();
 
    $('#myTable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
        if($(this).hasClass("selected")){ // ถ้าเป็นการคลิกเลือกแถวรายการใดๆ 
            // ดึงค่าจาก data attribute ของแถวรายการที่เลือก
            var key_unique = $(this).data('txtID');
            var accValue = $(this).data('txtACC');
            var tmValue = $(this).data('txtITM');       
            // สร้าง form element ที่ต้องการ
            var ele1 = '<input type="hidden" name="txtID['+key_unique+']" value="'+key_unique+'">';
            var ele2 = '<input type="hidden" name="txtACC['+key_unique+']" value="'+accValue+'">';
            var ele3 = '<input type="hidden" name="txtITM['+key_unique+']" value="'+tmValue+'">';
            // นำ element ที่เราสร้างไปไว้ที่ div ที่เราสร้างไว้สำหรับนำไปใช้งาน
            $("#data_element").append(ele1+ele2+ele3);             
        }else{ // ถ้าเป็นยกเลิกการเลือก
            // ลบ element ที่สร้าง ที่มีชื่อลงท้ายด้วยค่า unique ที่ตรงกับ แถวที่เลือก ออกจากฟอร์ม
            $("input[name$='["+$(this).data("txtID")+"]']").remove();
        }
    } );
} );
</script>
<script>
    $(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
</body>
</html>

อันนี้เป็นส่วนของหน้าแสดงผลครับ

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
</script>
<?php
?>
<div id="data_element"></div>
</body>
</html>


รบกวนด้วยครับ

Natchaphon Jumnakros 110.170.68.xxx 07-08-2019 17:22

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

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

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