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

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

เกี่ยวกับการต่อยอดโค้ดจาก template ครับ
template จากเว็บ https://datatables.net/examples/api/select_row.html

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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>




ในส่วนของ

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


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




Natchaphon Jumnakros 06-08-2019 11:55:50

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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อ่าน 34,605
ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attributeอ่าน 10,788
ninenik 06-08-2019
 ความคิดเห็นที่ 2
ผมลองปรับตาม ตย. แล้วรันดูครับแต่ค่าไม่แสดงในอีกเพจครับ
หน้า INDEX ครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<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>


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 07-08-2019 17:22







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ