Hi there,

I am using Datatables server side, and have the data being displayed controlled by a date range onChange event. However, when i select a date, for some reason, I perform a GET with the same values 5 times? I'm not sure why.

here is my datatable:

var getMessageDate = function() {
oMessageDate = $("#tblMessageDate").dataTable({
"sDom": "<'row-fluid'<'span6'lT><'span6'>r>t<'row-fluid'<'span6'i><'span6'p>>",
"aLengthMenu": [[5, 25, 50, 100, 250, -1], [5, 25, 50, 100, 250, "All"]],
"iDisplayLength": 1,
"bProcessing": true,
"bServerSide": true,
//"bDestroy": true,
"sAjaxSource": "MessageDate.asmx/GetMessageDate",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bDeferRender": true,
"fnServerParams": function(aoData) {
aoData.push(
{ "name": "iSenderBIC", "value": $('#dd:selected').val() },
{ "name": "ifromDate", "value": $('#fromDate').val() },
{ "name": "itoDate", "value": $('#toDate').val() },
{ "name": "iCurrency", "value": $('#CurrencySearch').val() },
{ "name": "iReference", "value": $('#ReferenceSearch').val() },
{ "name": "iBeneficiary", "value": $('#BeneficiarySearch').val() },
{ "name": "iMsgType", "value": $('#messageTypeSearch').val() },
{ "name": "iStatus", "value": $('#StatusSearch').val() },
{ "name": "sSearch", "value": $('#globalSearch').val() }
);
},
"fnRowCallback": function(nRow, aoData) {
if (aoData[6] == 'detected' || aoData[6] == 'partially approved') {
$('td:eq(0)', nRow).html('' + aoData[0] + '');
$('td', nRow).css('background-color', '#428BCA');
$('td', nRow).css('color', '#fff');
$('td a', nRow).css('color', '#428BCA');


} else if (aoData[6] == 'Violation detected' || aoData[6] == 'partially approved' || aoData[6] == 'Violation Stopped') {
$('td:eq(0)', nRow).html('' + aoData[0] + '');
$('td', nRow).css('color', '#d9534f');
$('td a', nRow).css('color', '#a94442');
} else if (aoData[6] == 'Nack') {
$('td:eq(0)', nRow).html('' + aoData[0] + '');
$('td', nRow).css('background-color', '#808080');
$('td', nRow).css('color', '#fff');
$('td a', nRow).css('color', '#a94442');
} else {
$('td:eq(0)', nRow).html('' + aoData[0] + '');
}
},
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"error":
function(xhr) {

var contentType = xhr.getResponseHeader("Content-Type");
if (xhr.status === 401 && contentType.toLowerCase().indexOf("text/html") >= 0) {
window.location.reload();
}
},
"success":
function(msg) {
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
$("#tblMessageDate").show();
}
});
},
"aoColumnDefs": [
{
"bVisible": false,
"aTargets": [7]

},
{
"bVisible": false,
"aTargets": [8]
}
],
"oLanguage": {
//"oAria": {
// "sSortingAscending": " - click/return to sort Ascending",
// "sSortingDescending": " - click/return to sort decending"
//},
"sInfo": "Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoFiltered": "(filtered from _MAX_ total records)",
"sEmptyTable": 'No Rows to display.....!',
"sSearch": "Search all columns:",
"sLoadingRecords": "Please wait - loading..."
},
});
};

and then here is the code which handles the change of date:

$('#fromDate').change(function() {
oMessageDate.fnDraw();
});

Now, as I mention, whenever oMessageDate.fnDraw() is called, it does 5 gets.