JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<body>
<input type="text" id="example_search" placeholder="datatable 1">
<table id="example" class="hover stripe nowrap cell-border" width="100%"></table>
<div id="update">Update row</div>
</body>
JavaScript
var dataSet = [
["1", "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "<div id=\"test\">$320,800</div>" ],
[ "2","Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "3", "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "4", "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "5", "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
];
$(document).ready(function() {
$('#update').on( 'click', function () {
var rows = $('#example').DataTable().rows().data();
$('#example').DataTable().rows().every(function( rowIdx, tableLoop, rowLoop ) {
var salaryColumn = 6;
var idIndex = 0;
var rowData = this.data();
if ( rowData[idIndex] == 2 ) { // update salary
$('#example').DataTable()
.cell( ':eq(' + rowLoop + ')', salaryColumn )
.data( 100000 )
.draw();
}
});
});
exampleTable = $('#example').DataTable({
data: dataSet,
columns: [
{ title: "id" },
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
iDisplayLength: -1,
'sDom' : 'T',
});
$('#example_search').keyup(function(){ // add search box for datatable
exampleTable.search($(this).val()).draw() ;
});
});