How to change the Html Table caption element, based on a drop down list

robertmazzo

I can't seem to figure out how to update the Html Table text once my table is bound to the Datatables plugin.

My two ajax routines pull the Portfolio Filters XML doc, as well as my Portfolio Exposure listing. All is good here. for example:

[code]
$.ajax({ // GET PORTFOLIO FILTERS FROM SERVER !!
url: "/Portfolios/getPortfolioFilters",
type: "GET",
dataType: "xml",
success: parsePortfolioFilters,
});
[/code]

Some code snippets up here - http://jsfiddle.net/robertmazzo/cy5Tp/

Here's the function that creates a Drop Down List, based on an XML doc :

[code]
function parsePortfolioFilters(xml) { // parse portfolio filters XML; append to drop down list !
$(xml).find("filter").each(function () {
var filterId = $(this).attr('id');
var filterName = $(this).find('name').first().text();

$('#drpPortFilters').append("" + filterName + "");
});
}
[/code]

and here's the CHANGE EVENT on that drop down list; again, I'm trying to access the element and change it !!!

[code]
$(document).ready(function () {

$('#drpPortFilters').change(function () { // CHANGE EVENT !!
var selValue = $('#drpPortFilters option:selected').text(); // selValue IS GOOD HERE !!

$('#pftable').find("caption").text(selValue); // DOES NOT WORK

var cap = oTablePf.find("caption"); // cap is an OBJECT, but how to access the caption here ???
alert(cap);

var oSettings = oTablePf.fnSettings(); // HOW TO USE oSettings to access my Html element ???

});
});
[/code]

Any feedback on using fnSettings, or anything else, would be appreciated.

regards,
Bob

allan

Getting the caption using jQuery after the table has been initialised appears to work okay for me: http://live.datatables.net/emediy/edit#javascript,html . Can you give me a link to a test case which shows it not working please?

Allan

robertmazzo

Thx Allan.
My UPDATED test case up here -

http://live.datatables.net/oxeqij/19/edit

- however my data source is XML, which comes from my server.

Please note the top two lines of my Javascript:

var oTablePf = $('#pftable').dataTable();

parsePortfolios(); // I hard coded a small Xml sample inline to this function...



thanks.
Bob

robertmazzo

Please help...

allan

I've removed a load of stuff that wasn't needed for just the caption changing: http://live.datatables.net/oxeqij/17/edit . That shows how to change the caption with a little bit of jQuery.

Allan

robertmazzo

Thank you Allan for your time again, as I realize you must be quite the busy man.
What are your charges for actual paid support ?
regards,
Bob

allan

http://datatables.net/support :-)

Allan

robertmazzo

Allan et al,
What I found is that it all depends on where I place my $.ajax() call.

As you can see here - http://live.datatables.net/oxeqij/19/edit#source - if I place my Ajax call inside $(document).ready() then the $('#drpPortFilters').change() event properly updates the text.

HOWEVER, when placing that Ajax call inside $(document).ready my Datatable DOES NOT get rendered.

I get a Datatables error msg stating "pftable - cannot reinitialise Datatable".

I need to place this Ajax call at the top of my script section in order for the server code to deliver back the XML data I need. Otherwise it won't work.

Any ideas on that ?

thank you !

allan

Remember that the Ajax call you are making is `asynchronous` ! i.e. your document ready function is likely to execute before the parsePortfolios - hence you are attempting to initialise DataTables twice, hence DataTables gives you a warning.

I'd suggest you initialise DataTables with all the options in the document ready function and then in the parsePortfolios function just use the API ( fnClearTable and fnAddData specifically) to add the data to the table.

Allan

robertmazzo

Hi,
So if I understand correctly, I can only call $('#pftable').dataTable({}) just once. And if I try to some refresh the datatable by calling $('#pftable').dataTable() again, then I seem to get the "cannot reinitialise" error.

I thought perhaps by running fnClearTable, I can call $('#pftable').dataTable() once again - but it appears not.

actually I've experimented with fnAddData some weeks back but was VERY slow to add all records. Perhaps I used it the wrong way, meaning that I was adding one row-at-a-time to my datatable.
If there's a bulk add option, then I'll go with that...I'll investigate that now...
thank you.

allan

> actually I've experimented with fnAddData some weeks back but was VERY slow to add all records.

It would be if you have it redraw for every single row that you add. Adding 100 rows === 100 redraws, unless to tell it not to redraw with the second parameter. You can also pass in an array of rows to be added (bulk option).

Allan

robertmazzo

BRILLIANT IDEA ! The table refresh worked !

HOWEVER, the table caption still will NOT work. Why is something so straight forward as a table caption SO difficult...LOL...

At the top of my JS code I have:

var oTablePf = $('#pftable').dataTable(); // GET A GLOBAL HANDLE ON DATATABLE OBJ
var oTablePf_Initialized = false; // INIT = FALSE

then in parsePortfolios() I have this logic, where parsePortfolios gets called from two events:
1) Page startup - ajax call to server
2) Dropdown change event : another ajax call to server for new data

if (oTablePf_Initialized == false) {

oTablePf = $('#pftable').dataTable({
"aaData": PfJsonData,
... // more options here...
});

oTablePf_Initialized = true; // Datatable INIT = TRUE
}
else {

// TEST !!!!!!!!
PfJsonData.push({
"PfId": 1,
"Name": "AAA TEST PF",
"ExpType": "TEST",
"Date": "05/01/1967",
"Term": "TEST",
"Exposure": "TEXT EXP"
});

oTablePf.fnAddData(PfJsonData, true);
$('#pftable').find("caption").text("Bob Mazzo"); // CAPTION UPDATE NOT WORKING !!!!!!
}

allan

Not sure, as I showed before it should work. I guess the selector isn't finding the element - what do you get from `$('#pftable').find("caption").length` ?

Allan

robertmazzo

GOT IT !
I changed my html table and added the class="pftable" :

[code][/code]

and my JS code to access the CLASS ATTRIB (NOT the "id")

[code]$('.pftable').find("caption").text(selValue);[/code]


I can suddenly get a handle on the element. LIVE AND LEARN !

It occurred to me that you had a rule about the "class" attribute of a table - and I was only using id="pftable" without the required class="pftable".

Once I clicked F12 in IE to inspect the Html, I found this :

[code]

...

HSVaR by Member
[/code]

I changed my html table def like this :

[code] [/code]

I can suddenly get a handle on the element. LIVE AND LEARN !

allan

Damn sorry - I missed that you have scrolling enabled. The way scrolling works is that DataTables needs to split the table into component elements, so yes, the #id selector isn't enough since that applies to the body element, not the header.

Thanks for letting us know how you got it going.

Allan

robertmazzo

Hey no problem Allan. I really do appreciate your considerate responses.
Indeed I noticed that scrolling on standard Html tables (using various divs) is quite the nightmare, so kudos to you for such a GREAT and useful plugin for those like myself who don't want to reinvent the wheel.
Hopefully this post will help others.
cheers from New York!
Bob