DT_RowData not working as manual suggest (sadly)

DT_RowData not working as manual suggest (sadly)

JiferJifer Posts: 3Questions: 1Answers: 0

On the manual (http://www.datatables.net/examples/server_side/ids.html) page there is something like this:

{object} DT_RowData - Add HTML5 data- attributes to the TR element.
This is an object of key / value pairs which are assigned as data attributes to the TR element.

which is not true, because this will not add data-attribute="value" to TR tag and will not allow accessing this data via $('tr').attr('data-attribute') or finding the element by $(tr[data-attribute="value"]). It will just add arbitrary data that will be associated with that element and will be available ONLY by $.data() function.

jquery.dataTables.js:1737

            if ( data.DT_RowData ) {
                $(tr).data( data.DT_RowData );
            }

From jquery manula: http://api.jquery.com/data/

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

IMHO there should be way to add real TR attributes data-{key}="{value}". Maybe DT_RowAttr?

This question has an accepted answers - jump to answer

Answers

  • ignignoktignignokt Posts: 146Questions: 4Answers: 39

    Here is a solution unless I am misunderstanding what you are trying to achieve.

    $('#MyTable').DataTable({
        columns:[
            {sTitle:"Name",data:"Name"},
            {sTitle:"Address",data:"Address"},
            {sTitle:"City",data:"City"},
            {sTitle:"State",data:"State"},
            {sTitle:"Zip",data:"Zip"},
            {data:"name_id",className:"never"},
            {data:"address_id",className:"never"},
            {data:"city_id",className:"never"},
            {data:"state_id",className:"never"},
            {data:"zip_id",className:"never"},
        ],
        processing: true,
        serverSide: true,
        ajax: {
            url:"/my/url",
            type:"POST"
        },
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
            $(nRow)
                .attr('name_id',aData['name_id'])
                .attr('address_id',aData['address_id'])
                .attr('city_id',aData['city_id'])
                .attr('state_id',aData['state_id'])
                .attr('zip_id',aData['zip_id']);
        }
    } );
    

    Output example:

    <tr name_id="42" address_id="27" city_id="89" state_id="32" zip_id="947">
    
  • JiferJifer Posts: 3Questions: 1Answers: 0
    edited November 2014

    Thank you. I am doing similar thing at the moment. I just made this post to point the "problem" so maybe someone will:

    • fix the manual page or better (lazy solution :] )
    • add new flag (3 lines of code) that will allow adding DOM attributes to the TR (like it is in manula)

    Because I think feature with $.data() is also great and should not be changed to just setting $.attr();

    Regards!

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin
    Answer ✓

    Excellent suggestion - and the manual was certainly wrong! Thanks for pointing this out!

    I've just committed the code for the suggested change, and the nightly build is now up to date with the change.

    The manual for this information has been updated and I'm rebuilding the site and will deploy it in a few minutes.

    Thanks for this!

    Allan

  • JiferJifer Posts: 3Questions: 1Answers: 0

    WOW! What more can I say. I would love to see more developers reacting as fast as you did. Thank you!

    Regards!

This discussion has been closed.