Progress Bar for a column in a Data Table- How to apply styling for a single column in a Data Table

amar1210

Hi All,

I am stuck with the implementation of applying a progress bar in a data column. From the below code snippet, i have to apply a progress bar for project progress, present i get a number from service and i have to show a progress bar

Could you please let me know how to apply a style in a specific column(here "projectprogress").

$(document).ready(function() {
var table= $('#projects').DataTable( {
"ajax": {
"url": "data/arrays.txt",
"dataSrc": ""
},
"columnDefs": [

        { "data": getNameAndAddress,"targets":-6 },
        { "data": "pname","targets":-5 },
        { "data": "uname","targets":-4 },
        { "data": "projectprogress","targets":-3 },
        { "data": "status","targets":-2 },
        {
            "searchable": false,
        "orderable": false,
             "targets": -1,
      "data": null,
      "defaultContent": 
         '<button class="btn btn-primary btn-xs btn-view" type="button">View</button>'
            +'<button class="btn btn-info btn-xs btn-edit" type="button">Edit</button>'
         + '<button class="btn btn-danger btn-xs btn-delete"  type="button">Delete</button>'
    },
        {
        "searchable": false,
        "orderable": false,
        "targets": -7,
            "data":null
    } 
    ],

Thanks in advance.

allan

I would suggest using columns.className to apply a class to all the cells in the target column and use that as your selector in CSS.

Allan