How to change color row column 'Audiences Name'?

I want to change the text 'One, Two, Three, Four' into color blue with an underline.

How to do that? I just wanna change color 'Audiences Name' row column, not all row.

jQuery :

 $(document).ready(function() {
    var tabble = $('#table1').dataTable({
      "ajax": "",
      "columns": [{
        "data": "name"
      }, {
        "data": "subtype"
      }, {
        "data": "approximate_count"
      }, {
        "data": "time_created"
      }],
      "order": [4, "desc"],
      "bStateSave": true,
      "stateSave": true,
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false
    });
  });

table.dataTable tbody th, table.dataTable tbody td {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
}

<script src=".1.0/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src=".10.16/js/jquery.dataTables.min.js"></script>
<link href=".10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table1" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Audience Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Date Created</th>
        </tr>
    </thead>

</table>

How to change color row column 'Audiences Name'?

I want to change the text 'One, Two, Three, Four' into color blue with an underline.

How to do that? I just wanna change color 'Audiences Name' row column, not all row.

jQuery :

 $(document).ready(function() {
    var tabble = $('#table1').dataTable({
      "ajax": "https://api.myjson./bins/sk48v",
      "columns": [{
        "data": "name"
      }, {
        "data": "subtype"
      }, {
        "data": "approximate_count"
      }, {
        "data": "time_created"
      }],
      "order": [4, "desc"],
      "bStateSave": true,
      "stateSave": true,
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false
    });
  });

table.dataTable tbody th, table.dataTable tbody td {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table1" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Audience Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Date Created</th>
        </tr>
    </thead>

</table>

Not working on the snippet demonstration

JSFiddle

• javascript
• jquery
• html
• css

• There is a dataTables error in the console of the JSFiddle and noe one, two, three, four... Uncaught TypeError: Cannot read property 'aDataSort' of undefined – JasonB Commented Dec 26, 2017 at 9:39
• i already update jsfiddle, you need to click 'Run'. – Calvin Ananda Commented Dec 26, 2017 at 9:41
• what happen with my fiddle? why not display when url's opened? – Calvin Ananda Commented Dec 26, 2017 at 9:42
• guys, why my row not display? – Calvin Ananda Commented Dec 26, 2017 at 13:47

6 Answers 6

You can use the className property in column object like this

JAVASCRIPT

$(document).ready(function() {
  var tabble = $('#table1').dataTable({
    "ajax": "https://api.myjson./bins/sk48v",
    "columns": [{
      "data": "name",
       "className": "blue"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }]
  });
});

HTML

<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Audience Name</th>
      <th>Type</th>
      <th>Size</th>
      <th>Date Created</th>
    </tr>
  </thead>

</table>

CSS

.blue {
  color: blue;
  text-decoration : underline;
}

Here is the working JSFIDDLE

You can also add a custom class to column and make style according to your need.

$(document).ready(function() {
  var tabble = $('#table1').dataTable({
    "ajax": "https://api.myjson./bins/sk48v",
    "columns": [{
      "data": "name",
      "class": "custom-class" //Class here
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "order": [4, "desc"],
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
  });
});

And in css

.custom-class {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
    }

table.dataTable tbody tr.selected {
    color: white;
    background-color: #eeeeee;
}

You have two options. You can either use inline css or use external css by specifying a classname to that row column.

I have used the inline css here.

Here's the => WORKING DEMO

<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr> 
      <th style="color:blue; text-decoration: underline;">Audience Name</th>
      <th>Type</th>
      <th>Size</th>
      <th>Date Created</th>
    </tr>
  </thead>

</table>

var tabble = $('#table1').dataTable({
    "ajax": "https://api.myjson./bins/sk48v",
    "columns": [{
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "order": [4, "desc"],
    "bStateSave": true,
    "stateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false
  });
});

you can do something like this, create a class with that CSS and once data table is loaded add that class to it.

$(document).ready(function() {
    var tabble = $('#table1').dataTable({
      "ajax": "https://api.myjson./bins/sk48v",
      "columns": [{
        "data": "name"
      }, {
        "data": "subtype"
      }, {
        "data": "approximate_count"
      }, {
        "data": "time_created"
      }],
      "order": [4, "desc"],
      "bStateSave": true,
      "stateSave": true,
      "bPaginate": false,
      "bLengthChange": false,
      "bFilter": false,
      "bInfo": false,
      "bAutoWidth": false
    });
});

$(document).find("#table1 thead th:first-child, #table1 td:first-child").addClass('test');

.test {
    color: blue;
    padding: 8px 10px;
    text-decoration: underline;
    cursor: pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table1" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Audience Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Date Created</th>
        </tr>
    </thead>

</table>

<table id="table1" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th style="color:white">Audience Name</th>
      <th>Type</th>
      <th>Size</th>
      <th>Date Created</th>
    </tr>
  </thead>

</table>