Jquery Datatable tidak berfungsi setelah insert data menggunakan ajax

misi gan mau tanya, saya lagi belajar buat insert data tanpa reload/refresh.. tapi setelah saya buat ajax nya data tsb masuk ke dalam db namun datatable bootstrap saya tidak berfungsi.. mohon bantuannya, berikut ss dan codingan saya

ini gambar sebelum insert data <a href=' https://ibb.co/enEhF7 '> https://ibb.co/enEhF7 </a>

gambar setelah insert data <a href=' https://ibb.co/hh5uTS '> https://ibb.co/hh5uTS </a>

berikut coding ajaxnya

 $(document).ready(function(){
			$('#Emp-form2').on("submit", function(event){
			event.preventDefault();

				$.ajax({
				url:"insert-emp.php",
				method:"POST",
				data:$('#Emp-form2').serialize(),
				beforeSend:function(){
				 $('#insert').val("insert");
				},
				success:function(data){
				 $('#Emp-form2')[0].reset();
				 $('.bs-example-modal-md').modal('hide');
				 $('#employee_table').html(data);
				}
				});
			});
		});

dan berikut coding setelah klik insert data

 if(!empty($_POST))
{
 $output = '';
    $EmpNIK = mysql_real_escape_string($_POST["EmpNIK"]);
    $EmpName = mysql_real_escape_string($_POST["EmpName"]);
    $Dept = mysql_real_escape_string($_POST["Dept"]);
    $query = "
    INSERT INTO t_employee(EmpNIK, EmpName, DeptName)
     VALUES('$EmpNIK', '$EmpName', '$Dept')
    ";
    if(mysql_query($query))
    {
     $select_query = "SELECT * FROM t_employee";
     $result = mysql_query($select_query);
     $output .= '
      <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>NIK</th>
                                        <th>Name</th>
                                        <th>Department</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

     ';
     while($row = mysql_fetch_array($result))
     {
      $output .= '
        <tbody>

            <tr>
                <td>'. $row['EmpNIK'] .'</td>
                <td>'. $row['EmpName'] .'</td>
                <td>'. $row['DeptName'] .'</td>
                <td style="text-align: center;"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span>       <span class="glyphicon glyphicon-trash" aria-hidden="true"></span></td>
            </tr>
        </tbody>
      ';
     }
     $output .= '</table>';
    }
    echo $output;
}
?>

apakah ada yg harus ditambah? thanks sebelumnya

avatar kodokLoncat
@kodokLoncat

21 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

3 Jawaban:

coba trigger lagi tablenya, kek gini:


success:function(data){
				 $('#Emp-form2')[0].reset();
				 $('.bs-example-modal-md').modal('hide');
				 $('#employee_table').html(data).dataTable();  // di baris ini, chain method dataTbale nya
				}

avatar apake1
@apake1

106 Kontribusi 55 Poin

Dipost 6 tahun yang lalu

masih belum bisa.. komponen datatablenya udh ada tp jquery untuk search, pagination gabisa...

avatar kodokLoncat
@kodokLoncat

21 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

Ini server side atau client side mas ? Buka aja mas Console di browsernya buat liat errornya kenapa.

avatar markeronly
@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban