Reloading Table with New Row Data
Reloading Table with New Row Data
JosephPGiunta
Posts: 4Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
[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
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]
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