JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<title>Example 1 - apply dataTable()</title>
<input id="test" type="button" value="update">
<input id="test2" type="button" value="version Check">
<div>
    <table id="dashboard">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

JavaScript

$(document).ready(function() {
    var columnData= [{
        "mDataProp": function(obj) {
            return obj.id;
        }
    }, {
        "mDataProp": function(obj) {
            return obj.name;
        }
    }, {
        "mDataProp": function(obj) {
            return obj.dep;
        }
    }];
    var rowData = [{
        "name":"Joe",
        "id":"1",
        "dep":"CSC"
    }, {
        "name":"John",
        "id":"2",
        "dep":"IT"
    }, {
        "name":"Jack",
        "id":"3",
        "dep":"ECE"
    }, {
        "name":"Rose",
        "id":"4",
        "dep":"EEE"
    }];
    
    DT = $('#dashboard').dataTable({
        "sDom": 'T<"clear"><"H"flr>t<"F"i>',
        "aaData": rowData,
        "aoColumns": columnData
    });
    $('#test').click(function() {
        newRow = ["Mech"]
        DT.fnUpdate(newRow, 1,2);

    })
    $('#test2').click(function() {
        alert(DT.fnVersionCheck('1.9.4'));

    })

});