How to add data-attribute in a cell (server-side)

raf_mix

Hello all,
I use datatable with ajax and server-side

How can I add some information in cell (td)?
There is an exemple at http://www.cscc.edu/_resources/app-data/datatables/examples/advanced_init/html5-data-attributes.html

But I need it with server side and specific attribute like data-validated='ok'...

Is there a way to do that?

Thanks in advance
Raphael

jLinux

You would just have to use the createdRow

$('#data-table').DataTable( {
    createdRow: function( row, data, dataIndex ) {
        // Set the data-status attribute, and add a class 
        $( row ).find('td:eq(0)')
            .attr('data-status', data.status ? 'locked' : 'unlocked')
            .addClass('asset-context box');
    }
} );

And by the way, using $( row ).find('td:eq(0)').data('key','val'); wont work, you have to use the $().attr() to set the attribute

raf_mix

Thank for your answer but it doesn't solve my issue, because the data-attribute is for a td (per cell) and I cannot make a rule to put $().attri() regarding the value of the cell.

Sorry, I find that I did'nt explain enought :

in db, I have :
name | value_1 | validated_3 | value_2 | validated_2 ... value_50 | validated_50

I need a table with name and value_1 to valur_50 and adding a color to the cell value_x if 'validated_x==1'.

So if there any way to had a data-attribute on ajax request, I will need to add the columns without displaying it...:(

Reason of my search about this point, so if any idea..

jLinux

Can you show me an example of what you expect the HTML within the DOM to look like?

raf_mix

for the moment, with db:

Name | value_1 | validated_1 | value_2 | validated_2
Airi | 100 | 0 | 200 | 1
John | 50 | 1 | 150 | 0

I have :

<tr id="client_id_1" >
<td class="sorting_1">Airi</td>\s\s
<td>100</td>\s\s
<td>200</td>\s\s
</tr>
<tr id="client_id_2" >
<td class="sorting_1">John</td>
<td>50</td>
<td>150</td>
</tr>

I need :

<tr id="client_id_1" >
<td class="sorting_1">Airi</td>
<td>100</td>
<td data-validate="1">200</td>
</tr>
<tr id="client_id_2" >
<td class="sorting_1">John</td>
<td data-validate="1">50</td>
<td>150</td>
</tr>

raf_mix

PS. \s\s was a markdown issue :)

another way could be with invisible columns:

<tr id="client_id_1" >
<td class="sorting_1">Airi</td>\s\s
<td>100</td>
<td>200</td>
<td>0</td>
<td>1</td>
</tr>
<tr id="client_id_2" >
<td class="sorting_1">John</td>
<td>50</td>
<td>150</td>
<td>1</td>
<td>2</td>
</tr>

but I'm lost to to create the attribute with cell.index +1 :(

raf_mix

I cannot edit previous post, so corrected post :

<tr id="client_id_1" >
<td class="sorting_1">Airi</td>\s\s
<td>100</td>
<td>0</td>
<td>200</td>
<td>1</td>
</tr>
<tr id="client_id_2" >
<td class="sorting_1">John</td>
<td>50</td>
<td>1</td>
<td>150</td>
<td>0</td>
</tr>

jLinux

Well my solution would work just fine.. You just add the data-validate attribute via createdRow, you can determine the value however you want, but setting it would be just like I said above..

Throw the following in your createdRow, and view the DOM source, it should be just like you want. the td:eq(2) tells it to insert that attribute on the 3rd cell

$('#data-table').DataTable({
    ajax: 'some_url',
    createdRow: function( row, data, dataIndex ) {
        $( row ).find('td:eq(2)').attr('data-validate', '1');
    }
});

Thats how its done.

raf_mix

Great! Thanks a lot

I do

  createdRow: function(row, data, dataIndex) {
            var a = $(row).find('td:eq(2)').html();
            $(row).find('td:eq(2)').attr('data-validate', a);
        }

Is there a better way to have the value of td:eq(2)?

jLinux

Not that I'm aware of, its either that or $(row).find('td').eq(0), same thing though...

Heres what I do.

var $fields_dt = $fields_table.DataTable({
    createdRow: function( nRow, aData, iDisplayIndex ) {
        $( nRow )
            // Row id attr
            .attr( 'data-row-id', iDisplayIndex )

            // Add the sortable grip class and center it
            .find('td').eq(0)
                .addClass('row-grip')
                .addClass('align-center' )
            .end().end()

            // Center the delete button
            .find('td').eq(1)
                .addClass('align-center')
            .end().end()

            // Start the labelauty plugin on the checkboxes
            .find(":checkbox.labelauty")
                .labelauty({ label: false })
            .end()

            // Start the labelauty plugin on the radio buttons
            .find(":radio.labelauty")
                .labelauty({ label: false });
    }
});

raf_mix

I will try both solutions:

createdRow: function(row, data, dataIndex) {
          var a = $(row).find('td:eq(2)').html();
          $(row).find('td:eq(2)').attr('data-validate', a);
      }

and parsing the table with jquery after loading the table

Will give you feedback...
(thanks again for you help)

jLinux

No problem bud

raf_mix

..at the end, I use a ajax after loading the table, more simple in my case
thanks for your help

jLinux

Usually is easier that way..