Apply data- element to Datatables cell

Question

I am trying to make the cells of a specific column all have a data-ip attribute associated with them so that I can later read it with jQuery when I need the data. I could create a separate column that is hidden that contains the ip however I would like to attempt this method first.

I am trying to associate a more readable hostname column with an ip. Here is the column from aoColumns:

{"sTitle": "Hostname", sName: "host", sWidth: "30%", sClass: 'host', mData:
    function (source) {
        return source.hostname
    }
}

As you see in the code I have source.hostname which fills the td with the JSON hostname however I want to apply a data-ip attribute that contains the source.ip data. Is this possible?

Edit - whole jQuery element:

$('#servicesTable').dataTable({
    'aaData': servicesJson['registered_services'],
    'aoColumns': [
        {"sTitle": "Hostname", sName: "host", sWidth: "30%", sClass: 'host', mData:
            function (source) {
                return source.hostname
            }
        },
        {"sTitle": "Service", sName: "service", sWidth: "30%", sClass: 'service', mData: "serviceName"},
        {"sTitle": "Monitored?", sName: "monitored", sWidth: "10%", sClass: 'monitored', mData:
            function (source) {
                if (typeof source.active === 'undefined')
                    return '';
                var monitor = source.active;
                if (monitor == 1)
                    return "<input type='checkbox' class='monitor' name='monitored' checked />";
                else
                    return "<input type='checkbox' class='monitor' name='monitored'/>";
            }
        },
        {"sTitle": "Status", sName: "status", sWidth: "15%", sClass: 'status', mData: "status"},
        {"sTitle": "URL", sName: "url", sWidth: "5%", sClass: 'url right', mData:
            function (source) {
                if (typeof source.url === 'undefined' || source.url == '')
                    return '';
                return "<a class='ui-icon ui-icon-link' href='" + source.url + "'>NAGIOS</a>";
            }
        },
        {"sTitle": "Add/Remove", sName: "add-remove-new", sWidth: "15%", sClass: 'add-remove-new', mData:
            function (source, type, val) {
                if (typeof source.addRemove === 'undefined')
                    return "<button class='add-remove-new' type='button'>Remove</button>";
                else
                    return "<button class='add-remove-new' type='button'>Add</button>";
            }
        },
    ],
    'bJQueryUI': true,
    'bInfo': false,
    'bPaginate': false,
    'bSort': false,
    'bFilter': true,
    'iDisplayLength': 25,
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        //function that is called everytime an element is added or a redraw is called
        //aData[] is an arraw of the values stored in datatables for the row
        //to change a row's html use $('td:eq('+index+')', nRow).html( html here ); where index is the index of the td element in the row
    }
});

lucasnadalutti · Accepted Answer · 2015-05-25 20:18:45Z

1

Sure is. Use jQuery's .data() to set the td's data-ip, as follows:

$('#my-td').data('ip', source.ip);

More information here.

Update: after you provided more detailes about your code, I did a lot of reading on the DataTables plugin and it really does seem to be a struggle to do this kind of manipulation via API directly. I would suggest you to follow your own idea of a hidden extra column, or to do as follows:

return source.hostname+'<span class="id-info">'+source.ip+'</span>';

The span would be hidden of course, and then your page would have some jQuery to pick this information after the table is created and give it to the td as its data-ip.

Not much of a difference when it comes to code ugliness, but at least it wouldn't leave a hidden column on the page since your jQuery could remove the span after adding the IP to the data-ip attribute.

edited May 25, 2015 at 20:18

answered May 25, 2015 at 18:38

lucasnadalutti

5,9882 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ComputerLocus Over a year ago

I understand how to set the data element, however the selector part is the problem. What would the selector be for this? I don't really have any kind of id to use. I have no idea what would be the selector here.

lucasnadalutti Over a year ago

I see. Guess I'll need a larger part of the code to help with this. In which context is the piece of code that you provided being called?

ComputerLocus Over a year ago

I have added more context.

Collectives™ on Stack Overflow

Apply data- element to Datatables cell

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related