CODEWITHSUNDEEP
javascriptjquerydatatablesjquery-data
ComputerLocus
ComputerLocus

Reputation: 3618

Apply data- element to Datatables cell

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
    }
});

Upvotes: 0

Views: 51

Answers (1)

lucasnadalutti
lucasnadalutti

Reputation: 5958

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.

Upvotes: 1

Related Questions