DT_RowData not working with ajax source

kmansoor

Hello- In the following scenario, DT_RowId works, however DTRowData does not:

The JSON looks like this (in Chrome):

{equipmentName: LATHE 1, equipmentNumber:1231, description: LATHE PP, location:23 NW, DT_RowId:4,…}
DT_RowData: {equipmentid:4}
    equipmentid: 4
DT_RowId: 4
description: " LATHE PP"
equipmentName: " LATHE 1"
equipmentNumber: "1231"
location: "23 NW"

I can see the <tr> tagged with the id correctly, however not with DT_RowData:

<tr id="2" role="row" class="odd"><td class="sorting_1">123</td><td>LATHE 1</td><td>23 NW</td><td>LATHE PPQE</td></tr>

I wonder if there is something wrong with my JSON?
Thanks.

kmansoor

I just earned a PhD in the arcane field of Stupidensity!!!!
Please ignore this post.
:-(

NoodleWave

I have a similar problem with datatables 1.10 and am also loading with AJAX, but the JSON looks ok on my end.

The JSON that gets returned:
{
“data”:[
{
"design_job_title":"Thing”,
"design_project_name":”",
"design_staff_name":”",
"design_job_creation_date":"2014-05-06”,
"design_job_production_deadline":"2014-05-09”,
"client_name":”",
"contact_name":”",
"DT_RowClass":"ClickRow”,
"DT_RowData”: {"Moose":17}
}
}

HTML that is shown:

<tr role="row" class="ClickRow odd">
<td>Thing</td>
<td></td>
<td></td>
<td class="sorting_1"> 2014-05-06</td>
<td>2014-05-09</td>
<td></td>
<td></td>
</tr>

It seems that TD_RowClass is working, but DT_RowData is not because I was expecting there to be a data-Moose = 17 attribute in the <tr>.

Am I missing something?

Thanks

kmansoor

try:

var moose = $("your-tr-selector").data().Moose;
console.log("moose: " + moose);

noodle_wave

Sorry, I couldn't log in to my old account.

That returns "undefined" because there is no data-Moose attribute in the <tr> tags.

On page: https://next.datatables.net/manual/server-side
It gives an example,

{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
{
"DT_RowId": "row_3",
"DT_RowData": {
"pkey": 3
},
...
}

I even made the ajax return the same key for fun, but datatables still won't add the 'data-' attribute.

My returned ajax data below:

{
"data":[
{ "design_job_title":"Thing",
"design_project_name":"",
"design_staff_name":"",
"design_job_creation_date":"2014-05-06",
"design_job_production_deadline":"2014-05-13",
"client_name":"",
"contact_name":"",
"DT_RowId":"1419",
"DT_RowClass":"ClickRow",
"DT_RowData": {"pkey":"3"}
}, // Other objects
]
}

The row in Developer tools:

<tr id="1419" class="ClickRow odd" role="row">
<td class="sorting_1">Thing</td>
<td></td>
<td></td>
<td>2014-05-06</td>
<td>2014-05-13</td>
<td></td>
<td></td>
</tr>

thespencer

I had to use both createdRow and DT_RowData:

"createdRow": function ( row, data, index ) {
$(row).attr('data-options',data['DT_RowData']);
},
"columns": [
{ "data": "name" }
]

{"draw":GET/POST draw PARAM!!!,"recordsTotal":69,"recordsFiltered":3,"data":[{"DT_RowData":"{'color':'blue','size':'big'}","name":"Chris"},{"DT_RowData":"{'color':'red','size':'small'}","name":"Peter"}]}

allan

@thespencer - it seems to work okay for me: http://live.datatables.net/medowoco/1/edit . Can you link to a test page showing the problem so I can investigate and patch DataTables id there is a problem there?

Allan

OlivierC

Hi,

@allan : Actually, the example you give seems to not work at all : there is no data attribute for any row... Therefore, the test page you give is good enough for investigating (I'd love to investigate myself, but I'm very bad at JS when it's not jQuery...)

I have the same problem : the json returned by the server seems to be correct. Here is a sample of the json response :

{
    "draw":1,
    "recordsTotal":32,
    "recordsFiltered":32,
    "data":[
        {
            "id":1,
            "nom":"My Name",
            "telephone":"0123456789",
            "remise":"<p style=\"width: 80%\" class=\"text-right\"><span class=\"taux remise-indiv\">15.00<\/span><\/p>",
            "ville":"My City",
            "solde":"<p style=\"width: 80%\" class=\"text-right\"><span class=\"solde solde-negatif\">-10.00<\/span><\/p>",
            "actions":"Edit / Delete",
            "DT_RowData":{
                "url":"http:\/\/mysite.tld\/client\/edit\/1"
            }
        },
        { ... more data ... },
    ],
    "aQueries":[
        ... SQL queries performed server-side ...
    ]}

And HTML produced by Datatables JS (first row only) :

<tr class="odd" role="row">
    <td class="sorting_1">1</td>
    <td>My Name</td>
    <td>My City</td>
    <td>0123456789</td>
    <td><p style="width: 80%" class="text-right"><span class="taux remise-indiv">15.00</span></p></td>
    <td><p style="width: 80%" class="text-right"><span class="solde solde-negatif">-10.00</span></p></td>
    <td>Edit / Delete</td>
</tr>

Everything is displayed correctly, everything works correctly (sort, search, etc.) except row data attribute which is just not there.

I'm using Laravel Framework (version 4.2.16) with bllim/datatables package for Laravel.

I'll see what I can do with createdRow callback...

Regards

allan

there is no data attribute for any row...

Correct - DT_RowData is applied using $().data(). jQuery will read data attributes but it doesn't need to set them. Refer to the jQuery documentation.

If you want to set attributes you need to use DT_RowAttr.

Allan