How to use Jquery DataTables in PHP?

jQuery · 11-Apr-2023

When “How to use Jquery DataTables in PHP?” moves through design, development and browser testing, this operations example can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi friends,

In this post, we will learn how to use php with jquery datatables example. i explained simply how to use jquery datatable example in php. Here you will learn jquery datatable with php example. This tutorial will give you simple example of jQuery datatable plugin in php mysql.

I will give you simple Example of how to use jquery datatables plugin example with php & mysql.

So let's see bellow example:

index.php

<!DOCTYPE html>  
<html>  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>How to use Jquery DataTables in PHP?- Nicesnippets.com</title>  
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.11.5/datatables.min.css"/>
</head>
<body>  
    <?php  
        $connect = mysqli_connect("localhost", "root", "", "demos");  
        $query ="SELECT * FROM developers ORDER BY ID DESC";  
        $result = mysqli_query($connect, $query);  
    ?>  
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header text-center text-white" style="background: #1867ab;">
                        <h3>How to use Jquery DataTables in PHP? - Nicesnippets.com</h3>  
                    </div>
                    <div class="card-body">  
                        <table id="employee_data" class="table table-bordered table-striped">  
                            <thead>  
                                <tr>
                                    <th>No</th>  
                                    <th>Name</th>
                                    <th>Skills</th>  
                                    <th>Address</th>    
                                    <th>Gender</th>    
                                    <th>Designation</th>  
                                    <th>Age</th>  
                                </tr>  
                            </thead>
                            <tbody>
                                <?php  
                                    while($row = mysqli_fetch_array($result))  
                                    {  
                                        echo'<tr>  
                                                <td>'.$row["id"].'</td>  
                                                <td>'.$row["name"].'</td>  
                                                <td>'.$row["skills"].'</td>  
                                                <td>'.$row["address"].'</td>  
                                                <td>'.$row["gender"].'</td>  
                                                <td>'.$row["designation"].'</td>  
                                                <td>'.$row["age"].'</td>  
                                            </tr>  
                                        ';  
                                    }  
                                ?>  
                            </tbody>  
                        </table>    
                    </div>
                </div>
            </div>
        </div>  
    </div>
    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.5/datatables.min.js"></script>
    <script>  
        $(document).ready(function(){  
            $('#employee_data').DataTable();  
        });  
    </script>
</body>  
</html>

Output:

I hope it will help you....