How to refresh a Datatable from server data

robertmazzo

The basic goal here is to have a client-side event trigger a Datatable refresh. I've heard of the refresh plugin for Datatables, but I would think something simple and straight forward is also possible. Please correct me if I'm wrong.

My code:

I have no problem initializing my Datatable based on XML data returned from the server. However, I'd like to have a drop down that triggers a basic Datatable refresh function.

initial javascript section to load XML doc :

[code]


// trying to use this as a global var, and reference in parsePortfolios()
var oTablePf = $('#pftable').dataTable();

$.ajax({ // GET PORTFOLIOS FROM SERVER !!
url: "/Portfolios/getPortfolios",
type: "GET",
dataType: "xml",
async: true,
success: parsePortfolios,
error: function (error) {
alert("failed in opening XML file !!!");
}
});

// DROP DOWN CHANGE EVENT !!!
$(document).ready(function () {

$('#drpPortFilters').change(function () {
var selValue = $('#drpPortFilters option:selected').text(); //$(this).val();

$.get("/Portfolios/getPortfolioFilters", function (xml) { parsePortfolios(xml) });

oTablePf.fnDraw();
});
});



[code]
$(document).ready(function () {
// Initialize Trade Contribs table (see html table below) - this allows to init an empty table to the right of portfolio table.
var oTable = $('#contribtable').dataTable();

// Portfolio Filters change event !!
$('#drpPortFilters').change(function () {
var selValue = $('#drpPortFilters option:selected').text();

$.get("/Portfolios/getPortfolioFilters", function (xml) { parsePortfolios(xml) }); // TRY TO REFRESH HERE !!!

oTablePf.fnDraw();
});
});
[/code]

My parse portfolios function works fine on the initial page load:

[code]

function parsePortfolios(xml) {
var PfJsonData = [];
...
PfJsonData.push({
"PfId": pfId,
"Name": name,
"ExpType": expType,
"Date": nodeDate,
"Term": term,
"Exposure": exposure
});
...
oTablePf = $('#pftable').dataTable({ // DATATABLES PLUGIN - TABLE OF PORTFOLIO EXPOSURES !!
"aaData": PfJsonData,
"sScrollY": "450px",
"sPaginationType": "full_numbers",
"aoColumns":[
{ "mData": "PfId" },
{ "mData": "Name", },
{ "mData": "ExpType" },
{ "mData": "Date" },
{ "mData": "Term" },
{ "mData": "Exposure" }
],
'aoColumnDefs': [

{ "sTitle": "Pf Id", "aTargets": [0] },
{ "sTitle": "Name", "aTargets": [1] },
{ "sTitle": "Exp Type", "aTargets": [2] },
{ "sTitle": "Date", "aTargets": [3] },
{ "sTitle": "Term", "aTargets": [4] },
{ "sTitle": "Exposure", "aTargets": [5] },
{ "sClass": "td_pfid", "aTargets": [0] }, // add a class attrib to cell data, column 0 "Pf Id"
{ "sClass": "td_nodedate", "aTargets": [3] },
],
"iDisplayLength": 50,
"bLengthChange": true, // enable Show menu
});
[/code]

Can someone point out what's wrong with this line : $.get("/Portfolios/getPortfolioFilters", function (xml) { parsePortfolios(xml) });

I've tried also using the initial $.ajax({ }); line from above, but that doesn't work either.

any feed is appreciated.

thanks,
Bob