How can i make use of bootstrap labels such as label-primary, label-danger etc in my column?

vaishnavkoka

In my datatable i am trying to retrieve data from the database using ajax and ssp, in my "status" column initially i have used a fnrowcallback function to color the background of my "status" column using the conditions, (for ex: if the status is "failed" then the background color of the failed column would turn to red.
here is code i have used to achieve this:

    **  "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if (aData[3] == "completed.txt") {
        $('td:nth-child(4)', nRow).css('background-color', 'Green');
      } else if (aData[3] == "failed.txt") {
        $('td:nth-child(4)', nRow).css('background-color', 'Red');
      }
      else if (aData[3] == "in-progress.txt") {
        $('td:nth-child(4)', nRow).css('background-color', 'Orange');
      }
          else if (aData[3] == "pending.txt") {
        $('td:nth-child(4)', nRow).css('background-color', 'Yellow');
      }
      else if (aData[3] == "stopped.txt") {
        $('td:nth-child(4)', nRow).css('background-color', 'Brown');
      }
       else if (aData[3] == "running") {
        $('td:nth-child(4)', nRow).css('background-color', 'blue');
      }
    }

**
output : http://prntscr.com/k1yw7x

Now i would like to change this output to this way:

http://prntscr.com/k1ywqe

In short how can i make use of bootstrap labels inside datatable ?

Thanks
Koka

matus.mark

Hi,

I think, this is what you need: https://datatables.net/reference/option/columns.render

vaishnavkoka

Hi @Matus.mark,
There is nothing mentioned about the bootstrap label, so would you mind telling me how can i make use of those lables for a particular column.

Thanks
Koka

kthorngren

The columns.render option that matus.mark mentioned does have an example of rendering html elements like the span tag which you might use for the Bootstrap labels. While its not specific to Bootstrap labels take a look at the 5th example.

I also built this example for you:
http://live.datatables.net/cowoweco/1/edit

Kevin

vaishnavkoka

columnDefs: [
{
targets: 2,
render: function (data, type, row, meta) {
if (type === 'display') {
var label = 'label-danger';
if (data='failed') {
label = 'label-warning';
} else if (data='running') {
label = 'label-success';
}
else if (data='halted') {
label = 'label-danger';
}
return '<span class="label ' + label + '">' + data + '</span>';
}
return data;
}
}
]

but it always changes the label to warning(failed)
It looks something like this now : http://prntscr.com/k2sk95
can you show the same thing for string ?
http://live.datatables.net/tafonalo/1/edit
everything changes to a particular label instead of one label

kthorngren

The if syntax is to use either == or === not just =. See the updated example:
http://live.datatables.net/fekaquho/1/edit

Kevin

vaishnavkoka

Thanks a lot it worked for me

vaishnavkoka

What if the there are two tables which shows status, I tried using the same code for the other column but it didnt work.
image ref : http://prntscr.com/k2tudm

kthorngren

Did you set the targets option to something like this?
targets: [1,2],

This will work assuming you have the same values in both columns. The numbers need to match the column numbers even if you have hidden columns.

Without seeing your Datatables code its hard to say what is wrong.

Kevin

vaishnavkoka

earlier i used the targets as
targets: 1,2,
which resulted in error, but now it works fine . you can close the thread.