CODEWITHSUNDEEP
javascriptphpjquery
joshua
joshua

Reputation: 177

How to implement datatable on php and mysql

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

Upvotes: 0

Views: 686

Answers (1)

TimBrownlaw
TimBrownlaw

Reputation: 5507

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...

  1. One too many <th> </th> tag entries or
  2. 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> -->

Upvotes: 1

Related Questions