DT column search value not sent to server
HTML
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<table id="dataTable" class="table table-bordered table-condensed table-striped">
<tfoot>
<tr>
<th>EmpNum</th>
</tr>
</tfoot>
<thead>
<tr>
<th>EmpNum</th>
</tr>
</thead>
</table>
JavaScript
$(document).ready(function () {
var table = $("#dataTable").DataTable({
columnDefs: [
{
targets: 0,
className: "searchable",
name: "EmpNum",
type: "string",
data: "EmpNum",
orderable: true,
searchable: true
}
],
lengthMenu: [10, 25, 50, 75, 100 ],
autoWidth: false,
order: [[0, "asc"]],
searching: false,
serverSide: true,
//stateSave: true,
//stateDuration: -1, // Store in session
pagingType: "full_numbers",
ajax: {
url: "/echo/json/",
type: "POST"
}
});
// Setup - add a text input to footer cell of searchable columns
// Sources: https://datatables.net/examples/api/multi_filter.html
// https://datatables.net/reference/api/columns().footer()
// https://datatables.net/forums/discussion/23962/individual-columns-search-based-on-the-searchable-value-of-the-col
table.columns(".searchable").every(function(){
var title = $('#dataTable thead th').eq( this.index() ).text();
$( this.footer() ).html( '<input type="text" placeholder="Search '+title+'" />' );
var col = this;
var timer;
var frequency = 1000;
$( 'input', this.footer() ).on( 'keypress change', function (evt) {
var input = this;
clearTimeout(timer);
timer = setTimeout(function(){
var searchVal = input.value;
alert("Searching for: " + searchVal);
col.search("fooBar").draw();
}, frequency);
} );
});
});