Getting aoColumns from server along with the data

leo

Hi to all,

before asking for help, let me say, Allan, that I'm really satisfied with DataTables - I've tried other jQuery grid solutions, and I find DataTables to be an exact fit to what I need, but not only in the features and functionality, but in logic and reason behind it too - I like the way it works and it's organized. And jQuery UI Themes support is just an excellent feature - right on the spot. And just one more thing before posting my question, I have to say I was positively very surprised when I saw you responding to most of the questions yourself and with such politeness and willingness to help. It's the best example of how a developer can contribute so generously to the community! Respect.

As for my problem, I'd like to see if someone can help me use the grid in a generic way, for displaying the JSON data returned from the server. So beside using sAjaxSource and aaData, I'd like to be able to transfer aoColumns along with the data array in JSON, and also keep bServerSide enabled.

I've managed to read the columns to oSettings.aoColumns after getting the data by adding the following the block to _fnInitialise:

[code]
if ( oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide )
{
_fnProcessingDisplay( oSettings, true );

$.getJSON( oSettings.sAjaxSource, null, function(json) {

//ADDED CODE
oSettings.aoColumns = [];

for ( i=0, iLen=json.aoColumns.length; i

allan

Hi Leo,

Thanks very much for the kind words. It's great that DataTables is proving to me useful to developers other than just myself :-)

Regarding the issue you are facing - so basically you want the server-side return to include aoColumns in it, which could change with any draw? If it was just on the initialisation that aoColumns would be specified, then I would recommend using $.getJSON() and initialising your table inside that return handler. However, changing the columns etc on the fly... that's a good question!

As you've seen from your investigation, that's not something that DataTables supports directly at the moment, the server-side processing is currently set-up for expecting data only, not display information as well. I hadn't really considered that the column names and contents might change on each draw.

However, one option that doing spring to mind is to use a combination of the ability to dynamically show and hide columns, and the custom server-side call back function. If you were to have a maximum of (for example) 10 columns, and that might vary between 5-10, then you could send back a custom variable from the server-side processing to indicate how many columns should be set to visible and what their titles should be. With that information, you can then use the fnSetColumnVis() API function to show/hide the number of columns needed, and standard DOM selectors to stick the column titles in as needed. Your server-side script would need to always return 10 columns, but the unused ones would just be empty strings.

Does that sounds like it would do what you need?

Regards,
Allan

leo

Hi Allan, unbelievable - I get an answer after 20 minutes! :))

In my case, I usually use a grid component in different places in a Javascript project, and it's mostly to improve user experience with displaying tabular data - without much attention to tailoring grid behavior to the specific result set - at least in the first iteration. So what is most useful is that you can just drop in the component, set the URL of it's datasource, and it displays whatever it gets, without the need to specify the columns for each different use case. This is what I was trying to achieve :)

I saw your first proposed solution in another thread and this seems like a great one - I'll have to try this. What I'm not sure is how I will combine this with server side paging/sorting, but I'm going for it right away and I'll see what I get :)

The other option is also an interesting one, I'll let you know how it works :)

Thank you very much for your time and help!

Leo

allan

Hi Leo,

You caught the forum at a good time there :-)

If you go with the option of using $.getJSON() to get the DataTables initialisation object and then later on what to change the table, you could go with the approach of just destroying the old table, and then create a new blank one, and re-initialise that as needed.

Regards,
Allan

thiago.topz

Hi Allan,

I'm realy happy and excited with your plugin! Thanks and congratulations!

I'm uping this post, because I would like to call the header dynamically too. There are any possibilities to implemating this feature? Just like Leo said, it should be wonderful if we could call the header together the data, but if it's not possible, maybe calling an extern archive like in oLanguage (sUrl function) is a way?

I'm new on all that stuff with jQuery and plugins, but I'll be glad to help!

thiago.topz

Well, I did a work around it, calling a php variable into the javascript function, but it yet does not the ideal way for me... I'm ansious for your answer!

allan

Hi thiago.topz,

If you are looking to just update the column titles, then this can quite readily be done using fnServerData with a few custom parameters and a little DOM manipulation. The real trick comes which adding and removing columns on each draw - this can be done, but it's a bit hacky... What you could do is initialise a table with (say) 20 column, and then hide the ones you don't need on each draw.

If you just what to have aoColumns initialised from the server side during initialisation, then you can do this with $.getJSON() as I suggested above.

Hope the helps,
Allan

thiago.topz

Hi Allan!

Thanks for reply.

I'm a little confused with your solution, but the first one don't fit very well for me. About the $.getJSON(), may you post a exemple of how I can call it?

Sorry my english!

thiago.topz

I did it!

But I need to keep the bServerSide true, and using the getjson method it doesn't work...

Anyway, Thank you... I'll try another ways to do that...

gutzofter

In my server side I send back an JSON object:
[code]
{
"status": "success",
"flash": "",
"data": {

}
}
[/code]

And then I use this to parse the returned json:
[code]
fnServerData: function ( sSource, aoData, fnCallback ) {
$.ajax( {
dataType: 'json',
type: 'GET',
url: sSource,
data: aoData,
success: function(json) {
fnCallback(json.data);
serverRequest.success(json);
},
complete: serverRequest.complete
});
[/code]

if there is a problem with the data request on the server then the json data will be an empty object.