How to implement datatable on php and mysql

Question

I want to implement datatable plugin on my table but it is not showing the required result Here is the code

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<table id="data" class="table table-hover mb-0">
    <thead>
    <tr>
        <th class="pt-0">#</th>
        <th class="pt-0">New User</th>
        <th class="pt-0">User_name</th>
        <th class="pt-0">Linkedin URL</th>
        <th class="pt-0">Resume</th>
        <th class="pt-0">Accept</th>
        <th class="pt-0">Remove</th>
    </tr>
    </thead>
    <tbody><!-- style ="font-size:20px;font-weight:bold;"-->

    <?php
    $sql_table = "SELECT *  FROM register  ORDER BY id";
    $result_table = mysqli_query($db, $sql_table);

    {
        while ($row_table = mysqli_fetch_assoc($result_table)) {
            $id = $row_table["id"];
            $field2name = $row_table["email"];
            $field3name = $row_table["username"];
            $field4name = $row_table["linkedin"];
            echo '<tr> 
                  <td>' . $id . '</td> 
                  <td>' . $field2name . '</td> 
                  <td>' . $field3name . '</td> 
                  <td><a href=' . $field4name . ' target="_blank">' . $field4name . '</a></td>';
            echo '<td><span class="approve btn btn-primary" data-id=' . $id . '>Approve</span></td>
                  <td><span class="delete btn btn-danger" data-id=' . $id . '>Delete</span></td>
              </tr>';
        }
        $result_table->free();
    } ?>
    </tbody>
</table>

<script>
    $(document).ready(function () {
        $('#data').DataTable();
    });
</script>

When running it is not showing any changes that are shown in datatable.net docs i have included script tag inside head too but it doesn't worked

Why oh why do you have script tags inside your Table as you are creating it? Where does your closing table tag appear on the scene? — TimBrownlaw
– TimBrownlaw, Commented Jun 15, 2020 at 10:31
i have not included that part it is after the closing tag </tbody></table> — joshua
– joshua, Commented Jun 15, 2020 at 10:35
also i have tried to include script inside head tag and inside body too but none worked — joshua
– joshua, Commented Jun 15, 2020 at 10:36
As a Very Strong Suggestion, do not use names like $field2name etc.. Call your variables what they are. You did with $id but then went all meaningless name calling with email, username and linkedin etc. calling them $field2name, $field3name and $field4name. — TimBrownlaw
– TimBrownlaw, Commented Jun 15, 2020 at 13:12

TimBrownlaw · Accepted Answer · 2020-06-15 13:13:28Z

1

Datatables is real fussy on getting the number of <th> tags, lets call them column name tags, and the number of <td> data column tags, in the table body, the same.

If you have 6 <th> </th> Tags in the table head <thead>, you need to have 6 <td> </td> tags in the table body <tbody>. They have to be the same number, whatever that is.

So you have either...

One too many <th> </th> tag entries or
Not enough <td> </td> tag entries.

I would guess it is option two.

So where you have specified <th>Remove</th>, you do not have the matching entry in the <tbody> section. I.E you are missing the Remove Column entry.

So your code section for the "action" buttons...

echo '<td><span class="approve btn btn-primary" data-id=' . $id . '>Approve</span></td>
      <td><span class="delete btn btn-danger" data-id=' . $id . '>Delete</span></td>
      </tr>';

Needs the "Remove" entry added which might look like...

echo '<td><span class="approve btn btn-primary" data-id=' . $id . '>Approve</span></td>
      <td><span class="delete btn btn-danger" data-id=' . $id . '>Delete</span></td>
      <td><span class="remove btn btn-danger" data-id=' . $id . '>Remove</span></td>
      </tr>';

And then it will all work, because I have it working on my development setup.

PS: You have a stray --> in

<th class="pt-0">Resume</th> -->

edited Jun 15, 2020 at 13:13

answered Jun 15, 2020 at 13:08

TimBrownlaw

5,5373 gold badges27 silver badges29 bronze badges

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

1 Comment

joshua Over a year ago

Thanks Tim actually the name thing i also like them to be generic it is just for testing purpose I named them so

Collectives™ on Stack Overflow

How to implement datatable on php and mysql

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related