DataTables individual search columns

DataTables individual search columns example.

HTML

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<table id="example" class="display table table-striped table-bordered" cellspacing="0" width="100%">
   
</table>

CSS

#example tfoot {
    display: table-header-group;
}

JavaScript

currentItem=[{"ip":"192.168.1.0", "protocol": "ssh"},{"ip":"192.168.1.2", "protocol": "tcp"}]

$(document).ready(function () {


    // DataTable
    var table = $('#example').DataTable({
     destroy: true,
        "data" : currentItem,
        "columns" : [
            { "data" : "ip", "title": "IP Address", "defaultContent": "N.A." },
            { "data" : "protocol", "title": "Protocol", "defaultContent": "N.A." }
        ],
        "aLengthMenu": [[ 5, 10, 50, 100, -1], [ 5, 10, 50, 100, "All"]],
        "scrollY":        "400px",
        "scrollCollapse": true,
		    "responsive": true

    });

  	$("#example").append(
			$('<tfoot/>').append( $("#example thead tr").clone() )
    );


    $('#example tfoot th').each( function () {
      var title = $('#example thead th').eq( $(this).index() ).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
      console.log("ola")
    } );



    // Apply the search
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).footer()).on('keyup change', function () {
            table.column(colIdx)
                .search(this.value)
                .draw();
        });
    });
});