Custom XHTML Attributes on the TD level

michandrz

I am using an ajax JSON implementation of DataTables where I pass many columns over that update dynamically using the refreshing script.

What I was wondering is in the generation of my JSON for DataTables is if it is possible to pass custom XHTML attributes so the final output for TD would be:
[code]
cell 1
[/code]

Any help with achieving this would be wonderful and if not my own custom attributes how about just the stranded XHTML attributes

allan

It sounds like you want the fnCreatedCell callback: http://datatables.net/ref#fnCreatedCell . That way you can manipulate the TD element as much as you want.

Allan

michandrz

Thanks Allan,

Not exactly what I was looking for. I think I've found a crude way to accomplish this with mDataprop and fnDrawCallback (I might be able to use fnRowCallback).

The problem was I needed to edit specific cells and dynamically assign title's and classes based on the html value. If I figure it out I'll post my results up for everyone

allan

What is the logic for deciding which cells should be modified. If it is column based then fnCreatedCell is good (even if it isn't actually, it could have a condition inside it). If it is completely arbitrary then fnDrawCallback modifying your cells as needed is about as good as it gets I'm afraid.

*edit* - are you using server-side processing or just Ajax loading for client-side processing? fnDrawCallback is an option for server-side processing. fnInitComplete for client-side processing (since it need be done only once).

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. :)

dreamer79

If you want to send custom and unknown(I mean at the time of js creation) attributes to td just use something like this:
[code]
if (typeof aData[i].attributes!='undefined'&&aData[i].attributes!=null){
//for td, but I use aData.attributes for tr too ;)
for (var pname in aData[i].attributes){
if (aData[i].attributes.hasOwnProperty(pname)) {
//this is important!!! Otherwise you'll get weird results with standard js object properties
$(v).attr(pname,aData[i].attributes[pname]);
}
}
}
[/code]

and in PHP

[code]
$rows[]= array('arrtibutes'=>array('title'=>'test','ban'=>'123','name'=>'222')....);
[/code]

michandrz

Dreamer you're solution looks close I am going to try and adapt it.

you are correct what's happening is i've got a program putting an XML document on an FTP site then I have a PHP script parsing that XML which is generating the title, class, and other attributes Based on the type of data received. What I thought I could do was send it like this:
[code]
{
aaData{
[ "cell1" : "cell1value", "title1" : "cell1title", "class1" : "cell1class",
"cell2" : "cell2value", "title2" : "cell2title", "class2" : "cell2class",
"cell3" : "cell3value", "title3" : "cell3title", "class3" : "cell3class"]
[ "cell1" : "cell1value", "title1" : "cell1title", "class1" : "cell1class",
"cell2" : "cell2value", "title2" : "cell2title", "class2" : "cell2class",
"cell3" : "cell3value", "title3" : "cell3title", "class3" : "cell3class"]
[ "cell1" : "cell1value", "title1" : "cell1title", "class1" : "cell1class",
"cell2" : "cell2value", "title2" : "cell2title", "class2" : "cell2class",
"cell3" : "cell3value", "title3" : "cell3title", "class3" : "cell3class"]
...
}
}
[/code]
and then in my table init:
[code]
$(document).ready(function() {
$.getJSON("./data.php?request=header", null , topProcessing);
fptable = $('table#fp').dataTable( {

"sDom" : 'lrtfp',
"bPaginate" : false,
"bProcessing": false,
"bstatesace" : true,
"sAjaxSource": './data.php?request=fp',
"fnDrawCallback": colorCallback,
"aoColumns" : [
{ "mDataprop": "cell1" },
{ "mDataprop": "cell2" },
{ "mDataprop": "cell3" },
]
} );
}
[/code]
and then using the colorCallback like this:
[code]

var table = oSettings.nTable;
for(i=0;i 249) {
obj.addClass("lagRed");
}
}
[/code]

having some error come up....i think i am using mDataprop wrong, but it's coming along slowly

I'm planning on adding on to the callback function to extend it to go into mDataprop and grab the attributes from the JSON object and populate the cells accordingly....i might be able to use the row based method it'd save me a for loop

Sorry for being so vague I'm an open source programer working for a very closed source person -_-

*Edit typed my data string out wrong

dreamer79

No problem. I'm giving some code I write for a big application, too. That's why it may be cut with some errors in code as my methods are larger, but I do exactly what you need as a part of my dataTable usage. For 3 days I had to figure out how to use the plugin(a part of the program just stopped working when you had to show 10000 records at once and I needed a server side solution for showing only parts of data so I downloaded dataTable and started testing ), how to make editable cells inside the grid that submit with a normal form, show cells and rows with very specific attributes(as class=itemrow goodid=X to fire an event to add row item to documents from a table inside dialog or just show info in a div beside table), key navigation for rows with controlling paging, custom filters inside header like "search by product name", "search at the beggining", resizing a grid on window resize to fit new dimesions and limiting number of records shown to have no scrolling on a page and so on to make an MVC like grid that suits a business type application not a site. In fact I already have such a grid and I decided to share some of the things I achieved with the plugin here.
The plugin is great. It has a big problem with missing things in documentation as triggered events or callbacks, there are some things you can achieve only by using undocumented functions or hooks to specific css classes around table. I didn't want to write over its source so I use only event hooks or callbacks(a great ammount of time reading source and catching what is called and when), but even this way one can achive great results. The problem is a little programmers try to write complex things over a library, but prefer to find a packed solution. So I can't pay for the component, I'll keep posting things I think can help its developers make this plugin work as a really complex grid.

michandrz

thanks, what can you tell me about the mDataprop?

every time I try to add the named key's to the JSON I get an error that "DataTables warning (table id = 'table'): Requested unknown parameter '1' from the data source for row 0"

[code]
$(document).ready( function{
table = $('table#table').dataTable( {

"sDom" : 'lrtfp',
"bPaginate" : false,
"bProcessing": false,
"bstatesace" : true,
"sAjaxSource": './data.php',
"fnDrawCallback": colorFP,
"aoColumns" : [
{ "mDataprop": "cell1" },
{ "mDataprop": "cell2" },
{ "mDataprop": "cell3" },
{ "mDataprop": "cell4" }
]
} );
setInterval(function() {table.fnReloadAjax(null)}, 5000);
}
[/code]
[code]
<?php
$xml = simplexml_load_file('./xmlfile.xml');
foreach($xml->row as $row) {
$toadd = array();
$toadd[cell1] = (string)$row[cell1];
$toadd[cell2] = (string)$row[cell2];
$toadd[cell3] = (string)$row[cell3];
$toadd[cell4] = (string)$row[cell4];
$output['aaData'][] = $toadd;
}
echo json_encode($output);
?>
[/code]

am I missreading something?

dreamer79

I haven't used mDataprop, but it has to be a name for data inside row object. So... As I've seen it in examples:

[code]
$row= array('cell1'=>'1243344','celltestnested'=>array('test'=>'test'));
[/code]

and you just pass this instead of using the default dataTable behaviour where $row is enumerated starting from 0 and each column is searched by it's position to set cell html to aaData.cell1 or aaData.cellnested.test . This won't help you if you need something to set specific XHTML attributes. It's just for prettier JSON.

allan

> every time I try to add the named key's to the JSON I get an error that "DataTables warning (table id = 'table'): Requested unknown parameter '1' from the data source for row 0"

This error means that DataTables is looking for the key "1" in the data source object and not finding it. The trailing comma here looks like it might cause this:

[code]
{ "mDataprop": "cell3" },
[/code]

If you can give us a link that would make it much easier to debug!

Allan

michandrz

i wish I could, it's a link-local site for now...and I'm tired of playing games so if I get in trouble for posting this oh well, here is my exact data(note I am NOT sending the extra information yet):
relevant js
[code]
fptable = $('table#fp').dataTable( {

"sDom" : 'lrtfp',
"bPaginate" : false,
"bProcessing": false,
"bstatesace" : true,
"sAjaxSource": './data.php?request=fp',
"fnDrawCallback": colorFP,
"aoColumns" : [
{ "mDataprop": "idg" },
{ "mDataprop": "png" },
{ "mDataprop": "cm1" },
{ "mDataprop": "cm2" },
{ "mDataprop": "idn" },
{ "mDataprop": "typ" },
{ "mDataprop": "alt" },
{ "mDataprop": "spd" },
{ "mDataprop": "ffp" },
{ "mDataprop": "tco" },
{ "mDataprop": "tfp" },
{ "mDataprop": "lot" },
{ "mDataprop": "nlo" },
{ "mDataprop": "kec" },
{ "mDataprop": "ker" },
{ "mDataprop": "tad" }
]
} );
setInterval(function() {fptable.fnReloadAjax(null)}, 5000);
[/code]
JSON output
[code]
{
"aaData": [
{
"idg":"michandrz",
"png":"18",
"cm1":"122.95",
"cm2":"",
"idn":"LXJ224",
"typ":"Learjet 45",
"alt":"17979ft",
"spd":"310",
"ffp":"+FP 1234",
"tco":"2203",
"tfp":"00:10",
"lot":"04:46",
"nlo":"334",
"kec":"206",
"ker":"1",
"tad":"3.6nm 199deg to KCXY"
},
{
"idg":"pearson123",
"png":"20",
"cm1":"119.62",
"cm2":"",
"idn":"N3187C",
"typ":"Baron 58",
"alt":"5071ft",
"spd":"185",
"ffp":"+FP | B58 |",
"tco":"3201",
"tfp":"00:17",
"lot":"04:37",
"nlo":"12",
"kec":"59",
"ker":"1",
"tad":"9.6nm 345deg to KCGF"
},
{
"idg":"fighter110",
"png":"17",
"cm1":"122.95",
"cm2":"",
"idn":"UAL817",
"typ":"A320_IAE",
"alt":"FL264 ",
"spd":"454",
"ffp":"+FP UAL 817",
"tco":"2200",
"tfp":"03:10",
"lot":"03:37",
"nlo":"294",
"kec":"263",
"ker":"0",
"tad":"45.2nm 134deg to KDBQ"
}
]
}
[/code]

Thank you guys again for all your help. Pls tell me if you see what I am doing wrong!

Oh and the colorFP function works fine when i don't try to use mDataprop so i know that's fine.

allan

That looks absolutely fine as long as you have exactly 16 columns in your table's HTML (more specifically the header). I'm guessing that there is a slight mismatch there?

Allan

michandrz

Nope, exactly 16.....
[code]



PILOT(s)
0
LAG
TX
MON
CALLSIGN
AIRCRAFT
TYPE
ALT

G.Spd

Currently Filed
CODE
FILED
FOR
ONLINE
FOR
LOGIN
COUNT
Total
Flood
Flood
/min
Nearest
Towered Airport



[/code]

allan

I'm afraid I don't know in that case, without being able to see the page. It looks like it should all be working from what you've posted.

I'm currently working on a debugging tool for DataTables that might be able to offer some help - or at least provide me with the information that is hopefully needed to figure out what is going on. It is very early stages, but if you can't make the page public, or put up an example using http://live.datatables.net or similar, I think that's probably the best way to go. Give me a shout if you like and I'll PM you the details.

Allan