Datatables.net Base Config

Col Search (at the top) Responsive Extension Bootstrap

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--
DataTables.net example
-->

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Grade</th>
            <th>Start date</th>
            <th class='none'>Salary</th>
            <th class='all'>Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Grade</th>
            <th>Start date</th>
            <th>Salary</th>
            <th></th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>ABUSO E TOSSICODIPENDENZE (TOS)</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>1,2,3</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td><i class="fa fa-pencil"></i></td>
        </tr>
        <tr>
            <td>azienti affetti da aids</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>10,11,12</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            <td><i class="fa fa-pencil"></i></td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical...

CSS

tfoot input {
    width: 90%;
    padding: 3px;
    box-sizing: border-box;
    font-size: 70%;  /* make search box text smaller */
    font-weight:normal;  /* make search box text normal */
}
tfoot {
    display: table-header-group;  /* place search boxes at top */
}

JavaScript

$(document).ready(function () {
    
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each(function () {
        var title = $('#example tfoot th').eq($(this).index()).text();
        if (title != '') {
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        }
    });

    // DataTable
    var table = $('#example').DataTable({
        // stateSave: true,  // save search and sort state between pages
        responsive: true,  // make table responsive
        columns: [
            null, null, null, null, null, null,
            {"orderable": false}
        ]
    });

    // Apply the search
    table.columns().every(function () {
        var that = this;
        $('input', this.footer()).on('keyup change', function () {
        		var v = $.fn.dataTable.util.escapeRegex( this.value)
//            var arr = this.value.split(";");
            var arr = v.split(";");
	        var pattern = ("\\b" + arr.join('\\b|\\b') + '\\b'); // full word
            // var pattern = this.value.replace(/;/g, '|') // fuzzy search
            that
                .search( pattern, true, true, true )
                .draw();
        });
    });
    
});