How to make js run after php input?

Question

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>[email protected]</td>
            <td>5421</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</td>
            <td>5421</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</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>[email protected]</td>
            <td>9422</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</td>
            <td>5421</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</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>[email protected]</td>
            <td>9422</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</td>
            <td>5421</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</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>[email protected]</td>
            <td>9422</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</td>
            <td>5421</td>
            <td>[email protected]</td>
             <td>5421</td>
            <td>[email protected]</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?

php is processed before the page is even sent to the client where the Javascript is run. Where is the element with id example to which you apply your datatables? jQuery usually fails quietly when the selector engine finds no elements — user3154108
– user3154108, Commented Jan 6, 2016 at 8:00
I take it from the official website of datatables I think it come from this: cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js Or this: — Hoàng Trung Hiếu
– Hoàng Trung Hiếu, Commented Jan 6, 2016 at 8:02
You do call your jQuery code on document ready, so maybe it's just a selector that's wrong. Use more logging is my tip! — online Thomas
– online Thomas, Commented Jan 6, 2016 at 8:03
@ParthTrivedi the problem here is the php is processed before the page is even sent to the client where the Javascript is run. SO that the display is not as i expected, can you help — Hoàng Trung Hiếu
– Hoàng Trung Hiếu, Commented Jan 6, 2016 at 8:04

Shizuka · Accepted Answer · 2016-01-06 08:27:53Z

1

1/ First, check again the element id #example, do you have it or not, it must be some things like:

<table id="example">

 <thread>
  <tr>
   <th></th>
  </tr>      
 </thread>

 <tbody>
  <tr>
   <td></td>
  </tr>      
 </tbody>

</table>

2/ Second, make sure you add the link to DataTable js to the page with the right path, for example:

<link href="css/dataTables.bootstrap.css" rel="stylesheet">

<link href="css/dataTables.responsive.css" rel="stylesheet">

<script src="js/jquery.dataTables.min.js"></script>

<script src="js/dataTables.bootstrap.min.js"></script>

<script src="js/yourscript.js"></script>

3/ Third, try to remove the php code, create a normal table, to see if the js work or not..?

edited Jan 6, 2016 at 8:27

answered Jan 6, 2016 at 8:14

Shizuka

263 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hoàng Trung Hiếu Over a year ago

Hello, i pretty sure that i did all the thing you listed out correctly, The problem here is, The code run well when the table was created by just html and no php, however when i create table by html and php (like my code), it can not run (it run but the interface i got does not like the thing i got when the table was created by html)

Shizuka Over a year ago

Do you use any webserver like Wamp, Xampp ...etc, try to restart the services of those program, or open the page normally without using webserver (right click -> open with Google Chrome ..., for example), to see if it work or not ...

Hoàng Trung Hiếu Over a year ago

i use XAMPP and i restart it several times but it still does not work

Mr Lister · Accepted Answer · 2016-01-15 12:52:56Z

0

Thanks a lot for your help, my code is wrong because I used order by in the select code and maybe also I added more <td> than <th>, I did realize it this morning.
Thank you a lot for helping me solve this problem.

edited Jan 15, 2016 at 12:52

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jan 8, 2016 at 3:30

Hoàng Trung Hiếu

2091 gold badge3 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to make js run after php input?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related