DataTables

DataTables Examples

by rotailed

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table class="dataTable" id="example">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Test 1</td>
            <td><ul class="list-unstyled"><li>Line2</li><li>Line3</li></ul></td>
            <td>30001</td>
            <td>40001</td>
        </tr>
        <tr>
            <td>Test 2</td>
            <td><ul class="list-unstyled"><li>Line1</li><li>Line2</li></ul></td>
            <td>30002</td>
            <td>40002</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td><ul class="list-unstyled"><li>Line1</li><li>Line2</li><li>Line3</li></ul></td>
            <td>30003</td>
            <td>40003</td>
        </tr>

    </tbody>
</table>

CSS

td.line1  {
    color: red;
}
td.line2  {
    color: green;
}
td.line3  {
    color: blue;
}

JavaScript

var dataTable = $('#example').DataTable({
  rowCallback: function(row, data, index) {
    console.log(data);

		if ( data[2] === '30001') {
    	$(row).find('td:eq(2)').addClass('line1')
    }  
		if ( data[2] === '30002') {
    	$(row).find('td:eq(2)').addClass('line2')
    } 
		if ( data[2] === '30003') {
    	$(row).find('td:eq(2)').addClass('line3')
    }       
    
   }
})