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,037

HOME > PHP > PHP Forum > DATATABLE กับ Ajax ครับให้ Ajax โหลดข้อมูลมาใหม่แต่ datatable หายไปครับ



 

DATATABLE กับ Ajax ครับให้ Ajax โหลดข้อมูลมาใหม่แต่ datatable หายไปครับ

 



Topic : 133867



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



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




ก่อนกด Edit
bf
หลังจาก Edit
at

หน้าหลัก
Code (PHP)
<?php
require_once("connect.php");

?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Tokyo Seisakusho(Asia)</title>

  <!-- Font Awesome Icons -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

  <!-- Plugin CSS -->
  <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">

  <!-- Theme CSS - Includes Bootstrap -->
  <link href="css/creative.min.css" rel="stylesheet">
  <script type="text/javascript" src="css/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="css/sweetalert2.min.css">
  <script>
   $(document).ready(function() {

      $(document).on('click','.delmat',function(e){  
      var tr = $(this).closest('tr');
      var val = $(this).val();
      e.preventDefault();  
      const swalWithBootstrapButtons = Swal.mixin({
      customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
      },
      buttonsStyling: false,
      })s

      swalWithBootstrapButtons.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, cancel!',
      reverseButtons: false,
      animation : true
      }).then((result) => {
      if (result.value) {
        $.ajax({
            url: "del_unit.php",
            type: "POST",
            async: false,
            cache: false,   
            dataType: "text",
            data: {
              "id_unit": val,"type1":"del"
            }, 
            success: function () {
              
            },
            error: function (xhr, ajaxOptions, thrownError) {
          
            }
        }).done(function(data){
            if(data == true){
              swalWithBootstrapButtons.fire(
              'Deleted!',
              'Your file has been deleted.',
              'success'
            )
            tr.fadeOut(1000, function(){
                    $(this).remove();
            });
            }else if(data == false){
              swalWithBootstrapButtons.fire(
              'Not Delete',
              'Can not delete please contact admin',
              'error'
            )
            }
        });
        return false; 
        
      } else if (
        // Read more about handling dismissals
        result.dismiss === Swal.DismissReason.cancel
      ) {
        swalWithBootstrapButtons.fire(
          'Cancelled',
          'Your Record is safe :)',
          'error'
        )
      }
      })  


      });
      $(document).on('click','.editunit',function(e){ 
        e.preventDefault();
           var id_unit = $(this).attr("id");  
           $.ajax({  
                url:"fetch.php",  
                method:"POST",  
                data:{"type":"unit","id_unit":id_unit},  
                dataType:"json",  
                success:function(data){  
                     $('#unit_name1').val(data.unit_name); 
                     $('#id_unit1').val(data.id_unit);  
                     $('#insert').val("Update");  
                     $('#add_data_Modal').modal('show'); 
                      
                }  
           });  
      });
      $(document).on('click','#insert',function(e){  
            e.preventDefault();
           if($('#unit_name1').val() == "")  
           {  
                alert("Unit name is required");  
           }
           else  
           {  
                $.ajax({  
                     url:"del_unit.php",  
                     method:"POST",  
                     data:$('#insert_form').serialize(),  
                     beforeSend:function(){  
                          $('#insert').val("Updating..");  
                     },  
                     success:function(data){  
                          $('#insert_form')[0].reset();  
                          $('#add_data_Modal').modal('hide');  
                          $('#employee_table').html(data); 
                          Swal.fire({
                          position: 'top-end',
                          type: 'success',
                          title: 'Data has been update.',
                          showConfirmButton: false,
                          timer: 1500
                        }) 
                     }  
                });  
           }  
      });
    });
  </script>
</head>

<body id="page-top">

  <!-- Navigation -->
  <?php
  include_once("navbar.php")
  ?>
  <header class="masthead">
    <div class="container h-50">
     <form name="form2" action="addunit.php"  method="post" id="about" class="shadow-sm center_div container jumbotron">
      <div class="form-row center_div container">
        <div class="form-group col-md-12">
          <label for="unit_name">Unit Name</label>
          <input type="unit_name" class="form-control" id="unit_name" name="unit_name" placeholder="ชื่อหน่วย">
        </div>
        <div class="form-group col-md-12">
      <button type="submit" class="btn btn-primary">Regist Unit</button>
        </div>
           </div>

    </form><br>
    <div class="container h-50">
    <div id="add_data_Modal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header" style="margin-left: 0px;">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Edit Material Unit Detail</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Material Unit</label>  
                          <input type="text" name="unit_name1" id="unit_name1" class="form-control" />  
                          <br />  
                          <input type="hidden" name="id_unit1" id="id_unit1" value=""/>  
                          <input type="hidden" name="type1" id="type1" value="update"/>
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
      <div class="form-group col-md-12 ">
      <div id="employee_table"> 
  <?php
        $strSQL = "SELECT id_unit,unit_name FROM unit_data WHERE unit_del_flg = 0";  
        $objQuery = mysqli_query($con,$strSQL);
        echo "<table class='table table-bordered table-striped table-hover shadow-sm'><tr class='thead-dark'><th scope='col'>Unit Name</th><th scope='col'>Delete</th><th scope='col'>Edit</th></tr>";
        while($objResult = mysqli_fetch_array($objQuery))
			  {
                echo "<tr>
                <td class='col-md-8'>".$objResult["unit_name"]."</td>"
                ?>
                <td  class='col-md-2'><button class="btn btn-danger delmat" id="<?php echo $objResult["id_unit"]; ?>;" value="<?php echo $objResult["id_unit"]; ?>;">Delete</button></td>
                <td  class='col-md-2'><button class="btn btn-primary editunit" id="<?php echo $objResult["id_unit"]; ?>;">Edit</button></td>
                <?php
                "</tr>";
          }
            echo "</table>";
        
     
?>   
      </div>
      </div>
  </div>
     </div>
  </header>
  
 
  <!-- Bootstrap core JavaScript -->
  
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/creative.min.js"></script>
  <script src="css/sweetalert2.min.js"></script>
</body>

</html>



หน้าดึงข้อมูลมา
Code (PHP)
    <?php
    require_once("connect.php");
    $strSQL = "UPDATE mat_data SET ";
    $strSQL .="mat_code = '".$_POST["mat_code1"]."' ,";
    $strSQL .="mat_name = '".$_POST["mat_name1"]."' ";
    $strSQL .=",id_pro = ".$_POST["process1"]." ";
    $strSQL .=",id_unit = ".$_POST["unit1"]." ";
    $strSQL .=",id_type = ".$_POST["mat_type1"]." ";
    $strSQL .=",mat_safety = ".$_POST["mat_safety1"]." ";
    $strSQL .="WHERE id_mat = ".$_POST["id_mat1"]." ";
    $objQuery = mysqli_query($con,$strSQL) or die($strSQL);

    $strSQL = "SELECT id_mat,mat_name,mat_code, mat_balance,(SELECT unit_name FROM unit_data WHERE unit_data.id_unit = mat_data.id_unit)as unit,mat_safety,(SELECT type_name FROM mat_type WHERE mat_data.id_type = mat_type.id_type)as type,(SELECT process_name FROM mat_process WHERE mat_process.id_pro = mat_data.id_pro)as process FROM mat_data WHERE mat_del_flg = 0";  
            $objQuery = mysqli_query($con,$strSQL);
            $output = "<br><table class='table table-bordered  table-striped table-hover display table-sm' id='example'>
            <thead><tr class='thead-dark'>
            <th class='th-sm'>Part Code</th>
            <th class='th-sm'>Part Name</th>
            <th class='th-sm'>Balance</th>
            <th class='th-sm'>Unit</th>
            <th class='th-sm'>Safety Stock</th>
            <th class='th-sm'>Type</th>
            <th class='th-sm'>Process</th>
            <th class='th-sm'>Delete</th>
            <th class='th-sm'>Edit</th>
            <th class='th-sm'>QRCODE</th>
            </tr></thead><tbody>";
            while($objResult = mysqli_fetch_array($objQuery))
          {
                    if ($objResult["mat_safety"] >= $objResult["mat_balance"]){
                        $output .= "<tr class='table-danger' id='".$objResult["id_mat"]."'>
                        <td>".$objResult["mat_code"]."</td>
                        <td>".$objResult["mat_name"]."</td>
                        <td>".$objResult["mat_balance"]."</td>
                        <td>".$objResult["unit"]."</td>
                        <td>".$objResult["mat_safety"]."</td>
                        <td>".$objResult["type"]."</td>
                        <td>".$objResult["process"]."</td>
                        <td><button class='btn btn-danger delmat' value='".$objResult['id_mat']."'>Delete</button></td>
                        <td><button class='btn btn-primary edit_data' value='edit' id='".$objResult['id_mat']."'>Edit</button></td>
                        <td><button class='btn btn-info gen' data-value='".$objResult['mat_name']."' value='".$objResult['id_mat']."'>GEN</button></td>
                        </tr>"; 
                        }else{
                        $output .= "<tr id='".$objResult["id_mat"]."'>
                        <td>".$objResult["mat_code"]."</td>
                        <td>".$objResult["mat_name"]."</td>
                        <td>".$objResult["mat_balance"]."</td>
                        <td>".$objResult["unit"]."</td>
                        <td>".$objResult["mat_safety"]."</td>
                        <td>".$objResult["type"]."</td>
                        <td>".$objResult["process"]."</td>
                        <td><button class='btn btn-danger delmat' value='".$objResult['id_mat']."'>Delete</button></td>
                        <td><button class='btn btn-primary edit_data' value='edit' id='".$objResult['id_mat']."'>Edit</button></td>
                        <td><button class='btn btn-info gen' data-value='".$objResult['mat_name']."' value='".$objResult['id_mat']."'>GEN</button></td>
                        </tr>";
                        }
                }
                $output .= "</tbody></table>";
                echo $output;	
    ?>




Tag : PHP, MySQL, CSS, HTML5, Ajax, XAMPP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-07-11 15:14:00 By : realizejoke View : 2073 Reply : 2
 

 

No. 1



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



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


แก้ได้แล้วครับ เส้นผมบังภูเขา
Code (PHP)
 $.ajax({  
                     url:"edit_save.php",  
                     method:"POST",  
                     data:$('#insert_form').serialize(),  
                     beforeSend:function(){  
                          $('#insert').val("Updating..");  
                     },  
                     success:function(data){  
                          $('#insert_form')[0].reset();  
                          $('#add_data_Modal').modal('hide');  
                          $('#employee_table').html(data);  
                          $('#example').DataTable(); > ใส่ฟังชั่นหลังเรียกข้อมูลก็ใช้ได้แล้ว
                          Swal.fire({
                          position: 'top-end',
                          type: 'success',
                          title: 'Data has been update.',
                          showConfirmButton: false,
                          timer: 1500
                        })
                     }  
                });  







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-07-11 15:17:51 By : realizejoke
 


 

No. 2



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



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


มาเก็บด้วยคนครับ เจอเหมือนกัน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-07-22 15:14:04 By : modlenine
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : DATATABLE กับ Ajax ครับให้ Ajax โหลดข้อมูลมาใหม่แต่ 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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

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