Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > PHP > PHP Forum > Ajax insert data modal box to database โดยแสดงข้อมูลเป็นแบบ datatable


[PHP] Ajax insert data modal box to database โดยแสดงข้อมูลเป็นแบบ datatable

 
Topic : 135760



โพสกระทู้ ( 20 )
บทความ ( 0 )



สถานะออฟไลน์



โหลด template ใช้ datatable อยาก insert data ลงดาต้าเบส ผ่าน modal box พอ modal box ปิดให้ datatable updateข้อมูลที่เพิ่มลงไป แต่โค๊ดพอ insert แล้ว แสดงเป็นแต่ตารางธรรมดา ไม่เป็น datatable จะทำยังไงให้มันอ่านไฟล์ js

form.php
001.    <script src="assets/vendor/datatables/js/dataTables.bootstrap4.min.js"></script>
003.    <script src="assets/vendor/datatables/js/buttons.bootstrap4.min.js"></script>
004.    <script src="assets/vendor/datatables/js/data-table.js"></script>
008. 
009.<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
010.                                        <div class="card">
011.                                            <div class="card-body">
012.                                                <h3>ประเภทใบงานซ่อม</h3>
013.                                                <form>
014.                                                <div class="row" style="padding: 5px;">
015.                                                    <button type="button" name="tab5" id="tab6" data-toggle="modal" data-target="#tab6_data_Modal" class="btn btn-info btn-sm"><i class="fas fa-plus-circle"></i>&nbsp;เพิ่มข้อมูล&nbsp;&nbsp;&nbsp;</button>&nbsp;&nbsp;&nbsp;
016.                                                    <a href="frmcassavaFieldinsert.php"><botton class="btn btn-primary btn-sm"><i class="fas fa-check-circle"></i>&nbsp;บันทึก&nbsp;&nbsp;&nbsp;</botton></a>&nbsp;
017.                                                    <a href="frmcassavaFieldinsert.php"><botton class="btn btn-danger btn-sm"><i class="fas fa-times-circle"></i>&nbsp;ยกเลิก&nbsp;&nbsp;&nbsp;</botton></a></div>   
018.                                                <div id="tab6_div" class="table-responsive">
019.                                                    <table id="tab6_table" class="table table-hoverable  table-bordered first" style="width: 100%;">
020.                                                        <thead>
021.                                                            <tr>
022.                                                                 <th width="10%"><strong>ลำดับ</strong></th>
023.                                                                 <th width="50%"><strong>ชื่อประเภทใบงานซ่อม</strong></th>
024.                                                                 <th width="10%"><strong>แผนก</strong></th>
025.                                                                 <th width="10%"><strong>สร้างโดย</strong></th>
026.                                                                 <th width="10%"><strong>วันที่ถูกสร้าง</strong></th>
027.                                                                 <th width="10%"><strong>ชื่อผู้แก้ไขล่าสุด</strong></th>
028.                                                                 <th width="10%"><strong>ชื่อผู้แก้ไข</strong></th>
029.                                                            </tr>
030.                                                        </thead>
031.                                                        <tbody >
032. 
033.                                                    <?php
034. 
035.                                                            $strSQL = "SELECT * FROM typerepair_setting ORDER BY id";
036.                                                            $objQuery = mysql_query($strSQL);
037.                                                            $i = 1;
038.                                                            while ($row = mysql_fetch_array($objQuery)){
039. 
040.                                                                echo "<tr>
041.                                                                    <td><strong>".$i."</strong></td>
042.                                                                    <td><strong>".$row['typerepair_name']."</strong></td>
043.                                                                    <td><strong>".$row['department_id']."</strong></td>
044.                                                                    <td>".$row['CreateDate']."</td>
045.                                                                    <td>".$row['CreateBy']."</td>
046.                                                                    <td>".$row['UpdateBy']."</td>
047.                                                                    <td>".$row['UpdateDate']."</td>
048.                                                                </tr>";
049.                                                                $i++;
050.                                                            }
051.                                                    ?>
052. 
053. 
054.                                                    </table>
055.                                                </div>
056.                                                </form>
057.                                            </div>
058.                                        </div>
059.                                    </div>
060. 
061. 
062. 
063. 
064.<!-------------------------tab5------------------------------------>
065.     
066.<div id="tab5_data_Modal" class="modal fade">
067. <div class="modal-dialog">
068.  <div class="modal-content">
069.   <div class="modal-header">
070.     <h4 class="modal-title">เพิ่มสาเหตุการปฏิเสธงานซ่อม</h4>
071.    <button type="button" class="close" data-dismiss="modal">&times;</button>
072.   </div>
073.   <div class="modal-body">
074.    <form method="post" id="insert_form_tab5">
075.     <label>สาเหตุการปฏิเสธงานซ่อม</label>
076.     <input type="text" name="nametab5" id="nametab5" class="form-control" />
077.     <br />
078.     <input type="submit" name="insert_tab5" id="insert_tab5" value="Inserting" class="btn btn-success" />
079. 
080.    </form>
081.   </div>
082.   <div class="modal-footer">
083.    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
084.   </div>
085.  </div>
086. </div>
087.</div>   
088.     
089.<script> 
090.$(document).ready(function(){
091. $('#insert_form_tab5').on("submit", function(event){ 
092.  event.preventDefault(); 
093.  if($('#nametab5').val() == ""
094.  
095.   alert("Name is required"); 
096.  
097.  else 
098.  
099.   $.ajax({ 
100.    url:"inserttab5.php"
101.    method:"POST",
102.    data:$('#insert_form_tab5').serialize(), 
103.    beforeSend:function(){ 
104.     $('#insert_tab5').val("Inserting"); 
105.    }, 
106.    success:function(data){ 
107.     $('#insert_form_tab5')[0].reset(); 
108.     $('#tab5_data_Modal').modal('hide'); 
109.     $('#tab5_div').html(data);
110. 
111.    
112.        
113.   }); 
114.  
115. });
116. 
117. 
118.}); 
119. </script>
120.     
121.<!-------------------------tab5------------------------------------> 


inserttab5.php
01.<?php
02.ob_start();
03.session_start();
04.?>
05. 
06. 
07.<?php
08.//insert.php 
09.if(!empty($_POST))
10.{
11. $times = date("H:i:s");                 // March 10, 2001, 5:16 pm
12. $today = date("d-m-Y");                   // 2001-03-10 17:16:18 (the MySQL DATETIME format)
13. $output = '';
14. $name = mysql_real_escape_string($_POST["nametab5"]);
15.     
16.     
17.    $strSQLMain = "SELECT MAX(id) As id FROM rejectremark_setting";
18.    $objQueryMain = mysql_query($strSQLMain);
19.    while ($objResultMain  = mysql_fetch_array($objQueryMain)){
20. 
21.        $max=$objResultMain["id"]+1;
22.        $Seq = substr("00".$max,-2,2);
23. 
24.    }
25.     
26.    $query = "
27.    INSERT INTO rejectremark(id, reject_code, reject_name, CreateDate, CreateBy) 
28.     VALUES('{$max}','RJ{$Seq}','$name', '{$today} {$times}', '{$_SESSION['UserID']}')
29.    ";
30.    if(mysql_query($query))
31.    {
32.     $select_query = "SELECT * FROM rejectremark ORDER BY id ";
33.     $result = mysql_query($select_query);
34.     $output .= '
35.      <table id="tab1_table" class="table table-hoverable  table-bordered first" style="width: 100%;">
36.                    <tr> 
37.                         <th width="10%"><strong>ลำดับ</strong></th>
38.                         <th width="20%"><strong>สาเหตุการปฏิเสธงานซ่อม</strong></th>
39.                         <th width="10%"><strong>สร้างโดย</strong></th>
40.                         <th width="10%"><strong>วันที่ถูกสร้าง</strong></th>
41.                         <th width="10%"><strong>ชื่อผู้แก้ไขล่าสุด</strong></th>
42.                         <th width="10%"><strong>ชื่อผู้แก้ไข</strong></th>
43.                    </tr>
44. 
45.     ';
46.     $i=1;
47.     while($row = mysql_fetch_array($result))
48.     {
49.      $output .= '
50.                    <tr>
51.                        <td><strong>'.$i.'</strong></td>
52.                        <td><strong>'.$row['reject_name'].'</strong></td>
53.                        <td>'.$row['CreateBy'].'</td>
54.                        <td>'.$row['CreateDate'].'</td>
55.                        <td>'.$row['UpdateBy'].'</td>
56.                        <td>'.$row['UpdateDate'].'</td>
57.                    </tr>
58.      ';
59.         $i++;
60.     }
61.     $output .= '</table>';
62.    }
63.    echo $output;
64.}
65.?>




Tag : PHP, MySQL, HTML, JavaScript, Ajax, jQuery

Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-12-08 16:09:18 By : aumebum-km View : 1221 Reply : 2
 

 

No. 1



โพสกระทู้ ( 4,170 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


เมื่อ .success ให้ สร้าง tr,td ให้เหมือน dialog table ที่มีอยู่ จัดองค์ประกอบ data ให้เรียบร้อย ค่อย append tbody ได้เลย
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-12-08 17:17:06 By : Genesis™
 

 
น่าจะยังไม่เข้าใจการทำงานของ Web

รายการที่ Add เข้าใหม่มันเกิดหลัง Document Ready
มีหลายท่าให้เลือกใช้

ajax.reload(), draw(), etc...

อ่าน Doc เอานะ
ถ้าอ่าน Doc ไม่เข้าใจ...ก็จงอ่านให้เข้าใจแล้วจะทำได้เอง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-12-09 09:34:26 By : Guest
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : Ajax insert data modal box to database โดยแสดงข้อมูลเป็นแบบ datatable
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่