Data Table

 Data Table is a javascript framework that adds filters to your existing table. It is one of the easiest ways to create filters in HTML table by just adding a few lines of code. Follow the steps given below to make data table.

Step 1 

Add CSS link in the head section

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">

Step 2

<table id="myTable">

        <thead>

            <tr>

                <th>Roll</th>

                <th>Name</th>

                <th>City</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>111</td>

                <td>Maria Anders</td>

                <td>Germany</td>

            </tr>    

            <tr>

                <td>104</td>

                <td>Sumi singh</td>

                <td>luxa</td>

            </tr>
            <tr>

                <td>105</td>

                <td>Rohit kumar</td>

                <td>sigra</td>

            </tr>
            <tr>

                <td>106</td>

                <td>KAveri shukla</td>

                <td>Kamacha</td>

            </tr>       

        </tbody>     

    </table>

Note Table should be in a proper format. Sample table structure given below

<table>

        <thead>

            <tr>

                <th>Heading </th>

                <th>Heading </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Data</td>

                <td>Data</td>

            </tr>

        </tbody>

    </table>

Step 3

Place this link in bottom of page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> 

    <script>

        $(document).ready(function () { 

            $('#myTable').DataTable();

        });

    </script>

Download Sample Code

Get Next Template