Reloading Table with New Row Data

JosephPGiunta

All,

I have a screen where a user can pick a date range that will search a Db and return any appropriate records. After a somewhat shakey start I am starting to get the hang of using the DataTables plugin. In searching the forums I'm finding a lot of older information, and I haven't been able to piece todether an answer.

Currently on document.ready the grid will load with data (this will eventually change but good enough for now). Then when a user can change a the date range (jQuery DatePicker) and click the button I want the grid to clear the previous results and load the new data. I've gleaned that fnReloadAjax is the way to go, but I'm not sure what / who to call as the callback function. I'm assuming it should be one of the internal DataTable functions to add the data, but I can't seem to figure it out.

Could someone help out here?
[code]
var oTable = {};

$(document).ready(function () {

/* ** Data Table loads onReady, all parameters are hard coded to simplify testing ** */
oTable = $('#tblInvoiceRecs').dataTable({
'bProcessing': true
, 'bServerSide': false
, 'bJQueryUI': true
, 'sPaginationType': 'full_numbers'
, 'sAjaxSource': 'CreateInvoice.aspx/GetInvoiceRecords'
, 'sAjaxDataProp': 'd'
, 'aaSorting': [[0, "asc"], [1, "asc"]]
, 'aoColumns': [
{ "sTitle": "Patient Number", "mDataProp": "PatNum", "sType": "string" }
, { "sTitle": "Finding Code", "mDataProp": "FindingCode", "sType": "numeric" }
, { "sTitle": "Finding Description", "mDataProp": "FindingDesc", "sType": "string" }
, { "sTitle": "Current Billing Code", "mDataProp": "CurrentBillingCode", "sType": "numeric" }
, { "sTitle": "Billing Description", "mDataProp": "BillingDesc", "sType": "string" }
, { "sTitle": "Action Date", "mDataProp": "ActionDate", "sType": "date", "sDateFormat": "mm/dd/yyyy" }
, { "sTitle": "Discharge Date", "mDataProp": "DischargeDate", "sType": "date", "sDateFormat": "mm/dd/yyyy" }
, { "sTitle": "Sds Sdm", "mDataProp": "SdsSdm", "sType": "string" }
, { "sTitle": "Payment Amount", "mDataProp": "PaymentAmount", "sType": "currency"
, fnRender: function (o) {
return formatCurrency(o.aData.PaymentAmount);
}
}
, { "sTitle": "Fit Fee", "mDataProp": "FitFee", "sType": "currency"
, fnRender: function (o) {
return formatCurrency(o.aData.FitFee);
}
}
, { "sTitle": "Posting Type", "mDataProp": "PostingType", "sType": "string" }
, { "sTitle": "Finding Key", "mDataProp": "FindingKey", "sType": "string", "bSearchable": false, "bVisible": false }
, { "sTitle": "Log Key", "mDataProp": "LogKey", "sType": "string", "bSearchable": false, "bVisible": false }
]
, 'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json'
, 'contentType': 'application/json;'
, 'type': 'POST'
, 'url': sSource
, 'data': "{DataSource: 'demo_db', StartDate: '06/01/2010', EndDate: '12/31/2010'}"
, 'success': fnCallback
});
}
});

/* ** Button Click --> User selects date range and clicks button; I would like DataTable to Clear and Load new rows ** */
$('#btnCreateInvoice').button().click(function () {
var aoData = { DataSource: 'demo_db', StartDate: '01/01/2010', EndDate: '05/30/2010' }
oTable.fnReloadAjax('HwcCreateInvoice.aspx/GetInvoiceRecords', aoData, ????????? )
});

});
[/code]

allan

Do this alone not work:

[code]
oTable.fnReloadAjax('HwcCreateInvoice.aspx/GetInvoiceRecords', aoData);
[/code]

?

fnReloadAjax will clear the table, make an Ajax request and then add the newly loaded data. I don't think you need to do anything else. Is Firebug or Inspector showing an error?

Allan

JosephPGiunta

Allan, thanks for writting back. My attention has been diverted the past couple of weeks on other projects. For better or worse I'm back to our company invoicing project.

Right now the trouble I have is that the new parameters set in aoData are not being passed to the server. I load the grid with a default set of criteria. The user can change the criteria and I need to go back to Oracle and grab the new dataset. In the server function, I see the original set of criteria, not the updated set.

When I pass aoData into fnReloadAjax, do I need to speficially set a property of oTable rather than pass aoData into fnReloadAjax.
[code]
//Head of js file
var oTable = {};

$(document).ready(function () {

/* ** Data Table loads onReady, all parameters are hard coded to simplify testing ** */
oTable = $('#tblInvoiceRecs').dataTable({
'bProcessing': true
, 'bServerSide': false
, 'bJQueryUI': true
, 'sPaginationType': 'full_numbers'
, 'sAjaxSource': 'HwcCreateInvoice.aspx/GetInvoiceRecords'
, 'sAjaxDataProp': 'd'
, 'aaSorting': [[0, "asc"], [1, "asc"]]
, 'aoColumns': [
{ "sTitle": "Patient Number", "mDataProp": "PatNum", "sType": "string" }
, { "sTitle": "Finding Code", "mDataProp": "FindingCode", "sType": "numeric" }
, { "sTitle": "Finding Description", "mDataProp": "FindingDesc", "sType": "string" }
, { "sTitle": "Current Billing Code", "mDataProp": "CurrentBillingCode", "sType": "numeric" }
, { "sTitle": "Billing Description", "mDataProp": "BillingDesc", "sType": "string" }
, { "sTitle": "Action Date", "mDataProp": "ActionDate", "sType": "date", "sDateFormat": "mm/dd/yyyy" }
, { "sTitle": "Payment Amount", "mDataProp": "PaymentAmount", "sType": "currency"
, fnRender: function (o) {
return formatCurrency(o.aData.PaymentAmount);
}
}
, { "sTitle": "Fee", "mDataProp": "FitFee", "sType": "currency"
, fnRender: function (o) {
return formatCurrency(o.aData.FitFee);
}
}
, { "sTitle": "Posting Type", "mDataProp": "PostingType", "sType": "string" }
]
, 'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json'
, 'contentType': 'application/json;'
, 'type': 'POST'
, 'url': sSource
, 'data': "{DataSource: 'demo_db', StartDate: '06/01/2010', EndDate: '12/31/2010'}"
, 'success': fnCallback
});
}
});

/* ** Button Click --> User selects date range and clicks button; I would like DataTable to Clear and Load new rows ** */
$('#btnCreateInvoice').button().click(function () {
var aoData = { DataSource: 'demo_db', StartDate: '01/01/2010', EndDate: '05/30/2010' }
oTable.fnReloadAjax('HwcCreateInvoice.aspx/GetInvoiceRecords', aoData) //<-- aoData does not contain new values @ Server

//Should I manually set aoData somehow
oTable.someWhere.aoData = aoData; //?
oTable.fnReloadAjax('HwcCreateInvoice.aspx/GetInvoiceRecords') //<-- call reload without aoData?
});
});

[/code]

allan

Hi,

If you have a look at the function definition for fnReloadAjax, it doesn't have a data option at the moment:

[code]
function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
[/code]

However, it does use the DataTables server get function, so you can use the normal DataTables method of setting extra parameters - namely fnServerParams . In that function you can add extra data to send to the server such as:

[code]
aoData.push( { "name": "more_data", "value": "my_value" } );
[/code]

Allan