javascript - How to solve Cannot set property '_DT_CellIndex' of undefined in Jquery Datatable ← (PHP, JavaScript, JQuery, MySQL, HTML)

<?php
    if(mysqli_num_rows($result)>0)
    {?>
        <table class="table table-striped" id="example" align="center">
            <tr>
                <thead>
                    <th style="padding:7px">Name</th>
                    <th style="padding:7px">Email</th>
                    <th style="padding:7px">Position</th>
                    <th style="padding:7px">Action</th>
                </thead>
            </tr>
                <tbody id="myTable">
    <?php
        echo "<tr>";
        
        while($row=mysqli_fetch_assoc($result))
        {
            $id = $row['id'];
            echo "<td style='padding:7px'>".$row["name"]."</td>";
            echo "<td style='padding:7px'>".$row["email"]."</td>";
            echo "<td style='padding:7px'>".$row["position"]."</td>";
            ?>
            <td style='padding:7px'><button class="btn btn-info"  onclick="deleteUser('<?php echo $row['id'];?>')"> <i class="fa fa-trash"></i> DELETE </button> |
            <a class="btn btn-info" href="edit_user.php?id=<?php echo $row['id'];?>"> <i class="fa fa-pencil"></i> EDIT</a> |       
            <button class="btn btn-info  abc" value="View Data" data-id="<?php echo $row['id']; ?>">  <i class="fa fa-eye"></i> VIEW DATA </button>
    
            </td>
    
    
            <?php echo "</tr>"; 
        } ?>
                </tbody>
    
                <tfoot>
                <th style="padding:7px">Name</th>
                <th style="padding:7px">Email</th>
                <th style="padding:7px">Position</th>
                <th style="padding:7px">Action</th>
                </tfoot>
                
        <?php
         echo "</table>";
         
     }
    else
        {
            echo "No row exists";
        }
    ?>

I am using Jquery Datatable for sorting,searching and paging data. after i run the code it shown an error _DT_CellIndex' of undefined. <tr>, <td>, <th>,<thead>,<tbody>,<tfoot> tags are used properly and closed properly. Help me out to solve this problem. [1]: https://i.stack.imgur.com/YL6Is.jpg

Solution:

First, I googled your error and looks like that generally means that your table is malformed in some way, like having mismatched row sizes.

I then messed around by putting your table in this HTML Table Validator:

https://wet-boew.github.io/wet-boew-legacy/v3.1/demos/tableparser/validator-htmltable.html

And it said "Error: You can not define any row before the thead group"

I'm pretty sure your problem is that you need to nest the tr inside of thead, instead of the other way around:

        <table class="table table-striped" id="example" align="center">
            <thead>
                <tr>

                    <th style="padding:7px">Name</th>
                    <th style="padding:7px">Email</th>
                    <th style="padding:7px">Position</th>
                    <th style="padding:7px">Action</th>
                </tr>
            </thead>