Setting a HTML attribute to a cell created from JSON

elboffor

Is it possible to add a custom HTML attribute such as data-key="123" to a cell by including the details of this in the JSON that draws the datatable?

allan

To apply attributes to cells you would need to use the columns.createdCell. It provides access to the node and also to the data object / array for the row so you can manipulate it as required.

Allan

elboffor

Thanks for the reply Allan,

Would you be able to give me an example of how this would look?

currently my JSON looks like this:

{ "data": [
 ["colum1data", "colum2data", "colum3data"],["colum1data", "colum2data", "colum3data"],["colum1data", "colum2data", "colum3data"]
]}

And I call the creation of the datatable like this:

    $("#example").DataTable({
        "sScrollX": "90%",
        "sScrollXInner": "100%",
        "ajax":'Ajax.asp?RT=test'
    });

if you could rewrite the above for me to add a class or an attribute of any kind it would be massively helpful.
I've looked at the columns.createdCellOption documentation but I just can't get my head round it :(
Thanks again
Chris

allan

It's a little difficult atm as I'm travelling and on my phone. Perhaps you can show me what you tried?

elboffor

Thanks for getting back to me Allan.
I've tried various things but it all comes back to me not understanding how the JSON data can be parsed by datatables to produce the HTML element ina way I can manipulate later with additional scripts.
I understand how to add attributes via the columns.createdCellOption but this is a blanket amendment for every row, also the data I want to be in the attributes are individual to each cell and are stored on the server.

The ideal solution would be to build the JSON out of objects and somehow declaring elements in the objects that can then be converted to simple html attributes in the created cell.
example:
```
{ "data": [
[{ "Class:"cellClass1","data-one":"dataOneValue","data":"colum1data"},{ "Class:"cellClass2","data-two":"dataTwoValue","data":"colum2data"},

```
when I tried the above (or something similar) the cells just displayed th word object twice per cell.

elboffor

I've given up lol, I ended up just building all my column data into span elements in the JSON (my JSON is now a mess but it works) kinda defeats the point of the JSON in one respect though so it would be nice to know how to achieve this

allan

{
    "targets": 3,
    "createdCell": function (td, cellData, rowData, row, col) {
        $(td).addClass(rowData[0]);
    }
}

Should really be all that is needed. That will add the data from array index 0 (since you are using arrays as your data source) as the class to column index 3. Obviously you'd change the indexes as you need.

If that isn't working for you, please link to the page and I'll take a look.

Allan

elboffor

Thanks for the reply Allan, I can't link the page as it's on my works intranet so you wont be able to access.
I had tried something similar to the above previously but was wondering if it could be adapted to use the html5 data classes. for example I use the following data-key data-value data-field which is used in the pages jquery to build the sql string depending on what is changed.
Also the above suggests to me it's a blanket change for all items in that column and not just individual cells. as you can imagine data-value is actually the raw value of the data from the server for a particular cell (I use a slightly modified version for display) and row to row as well as cell to cell this will change.

allan

It isn't possible to specify a function as an options value when using the HTML5 data-* attributes, so no, that isn't directly possible if you are using that method of initialising DataTables I'm afraid.

Also the above suggests to me it's a blanket change for all items in that column and not just individual cells.

The code I suggested above targets only column index 3 (i.e. fourth visible one). You can update as you need so it targets different columns or multiple. If you need to target specific rows / cells in the column (i.e. cross section between a column and row is a cell) then you can apply whatever logic is required in the function.

Allan

elboffor

thanks for the clarity allan,
I'll stick with a messy JSON then as it's easier to manipulate the data that way.
again though, thanks.

PalakVibhani

klk