Ajax source and custom attributes

JoeDavola

Let's say I have this table:

[code]



A
B
C




X1
Y1
Z1


X2
Y2
Z2



[/code]

Is it possible to create the same table using ajax? Can you pass the "id" and "title" attributes for and ?

allan

The basic answer is yes :-) - however, how exactly it is done is slightly more involved. This example shows how IDs can be added automatically to rows: http://datatables.net/beta/1.8/examples/server_side/ids.html - however there isn't a shortcut like that for adding title attributes to TD elements. For that you would need to use fnRowCallback ( http://datatables.net/usage/callbacks#fnRowCallback ) and add the attribute when the TD node is available.

Regards,
Allan

JoeDavola

Allan,

Thank you for your help.

Is there a way to process data before it's added to the row? I'd like to be able to pass an object instead of a string and then use that object to create custom attributes. For example:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
/* imagine aData[0] is an object, not a string {text: 'X1', title: 'Title X1'} */
$('td:eq(0)', nRow).html(aData[0].text);
$('td:eq(0)', nRow).attr('title', aData[0].title);

return nRow;
}
} );
} );
[/code]

JoeDavola

Right now I'm doing this by passing a string and then using JSON.parse() to create an object.

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

var oCellData = JSON.parse(aData[0]);

$('td:eq(0)', nRow).html(oCellData.text);
$('td:eq(0)', nRow).attr('title', oCellData.title);

return nRow;
}
} );
} );
[/code]

Not sure if that's the best solution, but it works :)

allan

In 1.8 (currently in beta) yes you can pass back an object and use that - have a look at this blog post: http://datatables.net/blog/Extended_data_source_options_with_DataTables .

Allan

michandrz

sorry to bring up and old issue, but i am attempting to work with custom xhtml attributes using the JSON server pulls. How in the world do you set custom attributes from Server side and have data tables display them correctly? ( i am using 1.9 just didn't think it deserved a new thread)

michandrz

*bump*

allan

For anyone else: http://datatables.net/forums/discussion/8468

Allan

dreamer79

michandrz ,

There's an easy way to do it. In PHP send an array instead text for cell value:
[code]
$row[] = array('data'=>$aRow[$aColumns[$i]],'style'=>'width: 50px', 'cssclass'=>'fixedwidth');
[/code]

Then in your js do the following:

[code]
$('#example').dataTable({
...

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td',nRow).each(function(i,v){
if (typeof aData[i]=='object'){
if (typeof aData[i].style!='undefined'){
$(v).attr('style',aData[i].style);
}
if (typeof aData[i].cssclass!='undefined'){
$(v).removeClass(aData[i].cssclass);
$(v).addClass(aData[i].cssclass);
}
$(v).html('');
if (typeof aData[i].data!='undefined'){
$(v).html(aData[i].data);
}
}
});
}
}

...
}
);
[/code]

PHP arrays come as objects after json_encode.
That's all to allow sending objects and different properties in them. :)