DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="PluginsTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>agree</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><input type="checkbox" id="chk_1"></td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td><input type="checkbox" id="chk_1" checked></td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td><input type="checkbox" id="chk_1"></td>
               ...

CSS

tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }

JavaScript

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#PluginsTable tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text"  class="form-control" placeholder="Search '+title+'" />' );
    });
 
    // DataTable
    var table = $('#PluginsTable').DataTable({
        "initComplete": function () {
            // Apply the search
            //this.api().columns().every( function () {     // If you want to only show certain columns you can use a array, see below : 
			this.api().columns([0]).every( function () {
                var that = this;
				
				$('#PluginsTable tfoot tr').appendTo('#PluginsTable thead');   // To displays the search boxs at the top instead to the bottom of the table
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                });
            });
			
			
			// -------------- here we add dropdown selectors filters to specified columns  --------------
				this.api().columns([1]).every( function () {
                var column = this;
                var select = $('<select class="form-control"><option  value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
           ...