Problem with Table and dropdown

edumorgan

Hi all.
I have a couple dropdowns that filters my table, but if I filter and that shows me 0 records, and I change the value of my dropdown nothing happens, even if I do have records for the specific filter.
Please I hope someone can help me. Thanks
[code]
var oTable;
var varSumGrandTotal = 0;
var varFilterTransaction;
var varFilterApplication;

$(document).ready(function () {
InitTable();

$('#ddlFilterTransaction').change(function () {
varFilterTransaction = $("#<%= ddlFilterTransaction.ClientID %>").val();
oTable.fnDraw();

});

$('#ddlFilterApplication').change(function () {
varFilterApplication = $("#<%= ddlFilterApplication.ClientID %>").val();
oTable.fnDraw();
});

$("#txtStartDate").keyup(function () { oTable.fnDraw(); });
$("#txtStartDate").change(function () { oTable.fnDraw(); });

$("#txtEndDate").keyup(function () { oTable.fnDraw(); });
$("#txtEndDate").change(function () { oTable.fnDraw(); });
});

function InitTable() {
/* Init the table */
oTable = $("#tblData").dataTable({
"sDom": 'T<"clear">lfrtip',
"oTableTools": { "aButtons": [{ "sExtends": "copy", "mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9] }, { "sExtends": "csv", "mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9] }, { "sExtends": "xls", "mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9] }, { "sExtends": "pdf", "mColumns": [1, 2, 3, 4, 5, 6, 7, 8, 9], "sPdfOrientation": "landscape"}] },
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Data.ashx",
"sPaginationType": "full_numbers",
"iDisplayLength": -1,
"fnServerData": function (sSource, aoData, fnCallback) {
if (varFilterTransaction != null) { aoData.push({ "name": "varFilterTransaction", "value": varFilterTransaction }); };
if (varFilterApplication != null) { aoData.push({ "name": "varFilterApplication", "value": varFilterApplication }); };
aoData.push({ "name": "StartDate", "value": $('#txtStartDate').val() });
aoData.push({ "name": "EndDate", "value": $('#txtEndDate').val() });
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"aLengthMenu": [[-1, 25, 50, 100], ["All", 25, 50, 100]],
"aaSorting": [[2, "asc"]],
"aoColumns": [{ "bVisible": 0 }, { "sWidth": "215px" }, { "sWidth": "85px" }, null, null, null, null, null, null, null, { "bSortable": false, "sWidth": "55px"}],

"fnDrawCallback": function (oSettings) {
varSumGrandTotal = 0;
$('#tblData tbody tr').each(function () {
var iPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(iPos);
var iId = aData[5];
varSumGrandTotal += parseFloat(iId.replace("$", ""));
});
$("#lblTotal").html("$" + varSumGrandTotal.toFixed(2));

},
"fnInitComplete": function () {
//this.fnProcessingIndicator(false);
varSumGrandTotal = 0;
$('#tblData tbody tr').each(function () {
var iPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(iPos);
var iId = aData[5];
varSumGrandTotal += parseFloat(iId.replace("$", ""));
});
$("#lblTotal").html("$" + varSumGrandTotal.toFixed(2));
}
});

}
[/code]

allan

Are you able to give us a link to the page please? Does the XHR contain the data that you would expect when you change the parameters?

What happens if you replace "varFilterTransaction" in the fnServerData function with a call to $().val()?

Allan

edumorgan

Here is the page:
http://essexfellsboro.alphadogtest.com/payment/

the error occur when you select
Declined
and
Basketball Clinic, if you try to select any another category it stops works.

edumorgan

So Allan, what do you think is wrong?

allan

i'm going to put it down to the Javascript error... :-)

[code]
TypeError: 'null' is not an object (evaluating 'aData[5]')
[/code]

That is caused by this code:

[code]
$('#tblData tbody tr').each(function () {
var iPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(iPos);
var iId = aData[5];
varSumGrandTotal += parseFloat(iId.replace("$", ""));
});
[/code]

When there are no records in the table, the 'TR' that is found is the "No records found" information row, not a data row - hence there is no data, and in turn you get an error..

So the best way to fix it... Probably a quick check for aData being null on return from fnGetData.

The alternative is the new 1.9 $ method - what you could do is:

[code]
var that = this;
this.$('tr', {"page": "current"}).each( function () {
var aData = that.fnGetData(this);
var iId = aData[5];
varSumGrandTotal += parseFloat(iId.replace("$", ""));
} );
[/code]

That will get all the TR elements shown on the current page and then use them in a jQuery object.

Allan

edumorgan

Allan, I used try and catch, thanks to put me on the right direction.
Best Regards
Eduardo

edumorgan

.