Data table warning : table id=datatable- request unknown parameter - datatables

Question

my problem is, im attached the image, you can understand my problem, im try to fix it, more than 2 hours, i cant fix it, please help me to fix my problem.this is a advance search part of my project.,
enter image description here
<div class="col-md-12">
<div class="col-md-4">
<div class="modal fade" id="mpSrch" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 95%">
<div class="modal-content">
<div class="modal-header btn-primary btn-sm" style="height: 40px;">
<button style="margin-top: -10px;" type="button" class="close btn-sm" data-dismiss="modal" aria-hidden="true">×</button>
<h6 style="margin-top: -5px;"><i class="glyphicon glyphicon-search"></i>Good Recieve Note</h6>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="modal-content" style="margin-left: 27px;width: 1250px;padding: 2px;">
<table id="datatable" class="datatableDisplay" font-size:"11pt">
<thead>
<tr>
<th>Id</th>
<th style="width:150px;">GRN No</th>
<th style="width:150px;">GRN Date</th>
<th style="width:150px;">Company Name</th>
<th style="width:150px;">Purchase Order No</th>
<th style="width:150px;">Confirm Status</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<div id="eee">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</div>
</tfoot>
</table>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$(document).on('click', '.selectid', function(e) {
e.preventDefault();
$('#hfRowItem1').val(parseInt($(this).parents('tr').children('td').eq(0).html()));
$('#btnFakeRowClick').trigger('click');
});
$(function Pageload() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
$(document).ready(function() {
var dataTableInstance = $('#datatable').DataTable({
"iDisplayLength": 5,
"bStateSave": false,
"oLanguage": {
"sLengthMenu": 'Show <select><option value="5">5</option><option value="10">10</option></select> entries'
},
"bJQueryUI": true,
"bAutoWidth": false,
columns: [{
'data': 'GRNId',
className: 'hide_column'
}, {
'data': 'GRNNo'
},
{
'data': 'GRNDate',
'render': function(jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return ("0" + date.getDate()).slice(-2) + '/' + ("0" + month).slice(-2) + '/' + date.getFullYear();
}
},
{
'data': 'CompanyName'
}, {
'data': 'PurchaseOrderNo'
}, {
'data': 'ConfirmStatus'
}, {
'data': null,
className: "center",
defaultContent: 'Select',
'width': '5%'
}
],
bServerSide: true,
sAjaxSource: 'GenericHandlers/GoodReceiveNoteDataHandler.ashx'
});
$('#datatable tfoot th').each(function() {
if ($(this).index() != 0 && $(this).index() != 9) {
$(this).html('<input type="text" class="dtSrchCol" placeholder="Search">');
if ($(this).index() == 2) {
$(this).find('input').addClass('datetimepicker');
}
}
});
dataTableInstance.columns().every(function() {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
});
});
});
$(document).ready(Pageload);