i tried to add datatables to my web, but i have a problem that is the code will not apply the js code after finishing input which have HTML and PHP. This is my js code:
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal( {
header: function ( row ) {
var data = row.data();
return 'Details for '+data[0]+' '+data[1];
}
} ),
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return '<tr>'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>';
} ).join('');
return $('<table class="table"/>').append( data );
}
}
}
} );
} );
And this is my html code:
<thead>
<tr>
<th>STT</th>
<th>Tên sản phẩm</th>
<th>Ngày sản xuất</th>
<th>Mã sản phẩm</th>
<th>Vị trí lắp đặt</th>
<th>Chủng loại</th>
<th>Nhóm</th>
<th>Dự án</th>
<th>Nhà sản xuất</th>
<th>Miêu tả sản phẩm</th>
<th>Lỗi</th>
<th>Cấp độ</th>
<th>Miêu tả lỗi</th>
<th>Người khắc phục</th>
<th>Thời gian khắc phục</th>
<th>Chi tiết lỗi</th>
<th style="width:1%; text-align:center">Hành động</th>
</tr>
</thead>
<tbody>
And this is the php code
$stt= 1;
$sql= "SELECT * from fixed ORDER BY sta ASC, level ASC";
//thuc hien cau lenh voi bien conn lay tu file connection.php
$query= mysqli_query($conn, $sql);
while ($data=mysqli_fetch_array($query)){
?>
<tr>
<td scope="row"><?php echo $stt++?></td>
<td><?php echo $data["ten_sp"]?></td>
<td><?php echo $data["ngay_sx"]?></td>
<td><?php echo $data["ma_sp"]?></td>
<td><?php echo $data["vitrilapdat"] ?></td>
<td><?php echo $data["chungloai"] ?></td>
<td><?php echo $data["nhom"] ?></td>
<td><?php echo $data["d_an"] ?></td>
<td><?php echo $data["nhasx"] ?></td>
<td><?php echo $data["mieuta"] ?></td>
<td><?php echo $data["loi"] ?></td>
<td>
<?php
if($data["level"] == 1){
echo '<p style="color: red;">Khẩn cấp</p>';
}else if($data["level"] == 2){
echo '<p style="color: #00b300;">Quan trọng</p>';
} else if($data["level"] == 3){
echo '<p style="color: #0000cc;">Cần lưu ý</p>';
}
?>
</td>
<td><?php echo $data["mieutaloi"] ?></td>
<td><?php echo $data["nguoikhacphuc"] ?></td>
<td><?php echo $data["thoigian"] ?></td>
<td><?php echo $data["chitiet"] ?></td>
<td><a href="prod_fixed_editinfo.php?id=<?php echo $data["id"]?>" class="btn btn-info btn-sm" role="button">
<?php
if($data["sta"] == 1){
echo "Un-read";
}else{
echo "Read";
} ?></a></td>
<td><a href="prod_fixed_delete.php?id=<?php echo $data["id"]?>" class="btn btn-danger btn-sm" role="button">Xóa</a></td>
</tr>
<?php
}
?>
And this is the result i get:
I want the result like this:
This is the code of this pic: (The same js and style as the first pic)
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
<th>Extn.</th>
<th>E-mail</th>
<th>Extn.</th>
<th>E-mail</th>
<th>Extn.</th>
<th>E-mail</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Vivian</td>
<td>Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
<td>9422</td>
<td>v.harrell@datatables.net</td>
<td>9422</td>
<td>v.harrell@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
<td>5384</td>
<td>m.bruce@datatables.net</td>
<td>9422</td>
<td>v.harrell@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
<td>4226</td>
<td>d.snider@datatables.net</td>
<td>9422</td>
<td>v.harrell@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
</tbody>
I think the problem here is the js code will not run after input all the info from php code, but i dont know how to fix that, can you help?
