Create Pagination, Sorting, Filter With HTML Table Using DataTable.JS

Introduction 

In this blog, we will learn how to use DataTable.js to create a grid with pagination, sorting, filter etc.,using jQuery. Most developers create a simple HTML table and write huge amounts of code to make a grid with sorting, paging, etc. features .

If you are using jQuery DataTable.js, you don't need to write a huge amount of code, as you need to just write 3-4 lines of simple code.

You can find more information about DataTable.js from the link here.

 

DataTable.js can be used with ASP.NET, Java, MVC, PHP, etc.. 

 

Features of DataTable.js

There are many features and advantage of Datatable.js. You can use it anywhere, using simple jQuery. If you are using DataTable.js, you can apply these features, which are given below.

• Inline Sorting.
• Sorting on each column.
• Pagination.
• Filter.
• Filter on each column.
• Global Search.
• Stylist Look .
• Dynamic column binding.
• Bind Json data.
• Language Independent.

Basic requirment to use DataTable.js

If you want to use DataTable.js, first, you have to use the library, which is given below, else it will through an error.

CSS 

<link rel="Stylesheet" href=" " "text="" javascript""="" src=""https://code.jquery.com/jquery-1.12.3.js""> " target="_blank">https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

jQuery 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>

DataTable.Js 

<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

How to use DataTable.js 

If you have added all libraries, create HTML table, whose code is mentioned below.

<table id="MyTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Postion</th>
                <th>Technologies</th>
                <th>Company Name</th>
                <th>Experience</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>

            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Bikesh</td>
                <td>Srivastava</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Navdeep</td>
                <td>Kumar</td>
                <td>Sr.Software Engg.</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Sujata</td>
                <td>Sinha</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Panakj</td>
                <td>Bhanadari</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Harikant</td>
                <td>Kumar</td>
                <td>Web Designer</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Payal</td>
                <td>Agrawal</td>
                <td>Software Engg.</td>
                <td>Salesforce</td>
                <td>Hytech</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Pritam</td>
                <td>Shekhawat</td>
                <td>Manager</td>
                <td>Salesforce</td>
                <td>Hytech</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Saurabh</td>
                <td>Kumar</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>HytechPro</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Vinod</td>
                <td>Kumar</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>HytechPro</td>
                <td>6</td>
            </tr>
            <tr>
                <<td>Manik</td>
                <td>Bansal</td>
                <td>Software Engg.</td>
                <td>SharePoint</td>
                <td>HytechPro</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Brijesh</td>
                <td>Srivastava</td>
                <td>Asst.Manager</td>
                <td>Pharma</td>
                <td>Sun Pharama</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Krishu</td>
                <td>Srivastava</td>
                <td>Software Engg.</td>
                <td>Asp.net</td>
                <td>Hytech</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>

Afterwards, create a JS code, which looks as shown below.

$(document).ready(function() {
    $('#MyTable').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                //to select and search from grid
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Now, you are ready to run an Application. I hope, you have done all the settings and code fine.You can see the output, as shown below.

 

 

Now, you can see and use all the features of DataTable.js. I hope you understood all the things. If you have any doubt, you can download the attached complete solution.