DataTables

DataTables Examples

by Dhiraj Bodicherla

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://www.datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css">
<input type="button" id="change" value="CLICK ME TO CHANGE LAST COLUMN VALUE 1 --> 100" />
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>2</td>
            <!-- <td>Extra td</td> -->
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>1</td>
            <!-- <td>Tokyo</td> -->
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>4</td>
            <!-- <td>San Francisco</td> -->
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>5</td>
            <!-- <td>Edinburgh</td> -->
        </tr>
    </tbody>
</table>

CSS

.lowlight{
    color: red;
}

JavaScript

var myTable = $('#example').DataTable();

$('#change').on('click', function () {
    myTable.column(2).nodes().each(function(node,index,dt){
        if(myTable.cell(node).data() == 1){
            myTable.cell(node).data('100');
        }
    });
});