Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery datatables - get a td by column name

I want to add a class to a td in a specific row. I don't want to fuss with numerical indices, but instead access the td by its column's name. In order words, I'd like to do something like this:

for each row in the table where the column "role" contains "some text" 
do add the "red" class to the td in the "email" column.

I've found a way to do it, but I'm not quite satisfied with it; I find it overly complicated. Do someone has something simpler to suggest?

In the example below, I add the class "red" to the td in the column "email" for every row that has "some text" in the "role" column:

tab = $("#myTable").dataTable({
    "data": dataset,
    "columns": [
            { "data": "uid", name: "uid" },
            { "data": "name", name: "name"},
            { "data": "role", name: "role"},
            { "data": "email", name: "email"}
    ]               
});
            
function GetTdByName(row, column_name) {
        var idx = row.nodes().column(column_name + ":name")[0]; 
        var selector = "td:eq(" + idx + ")";
        return row.nodes().to$().find(selector)
}
    
$("#btn").click(function() {
    var ta = $('#myTable').DataTable();
    ta.rows().every(function () {
            if ($.inArray(this.data().role , ["some text", "some other text,"] ) > -1) {    
                GetTdByName(this, "email").addClass("red");
            }
    })
})              

Update

I've found a neater way to do it. Actually, most of this solution can be found in the official doc: column-selector

    ta.rows().every(function () {
        if ($.inArray(this.data().role , ["some text", "some other text,"] ) > -1) {    
            $(ta.column("email:name").nodes()[this.index()]).addClass("red");
        }
    })
        
like image 517
jptanguay Avatar asked Feb 04 '26 20:02

jptanguay


1 Answers

There is a built-in callback for this: fnRowCallback. It might not be what you want as in your code, you're using a button click to apply the class, but this is how you use fnRowCallback to apply the class as the table renders:

tab = $("#myTable").dataTable({
    "data": dataset,
    "columns": [
            { "data": "uid", name: "uid" },
            { "data": "name", name: "name"},
            { "data": "role", name: "role"},
            { "data": "email", name: "email"}
    ],
   "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if(aData[2] == 'some text'){
         $('td:eq(3)', nRow).addClass('red');
      }
   },
...
like image 106
markpsmith Avatar answered Feb 06 '26 13:02

markpsmith