JSFiddle - React, Tailwind, and code Playground
by sonusindhu
HTML
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/examples/examples_support/jquery.jeditable.js"></script>
<table cellspacing="0" cellpadding="0" border="0" id="example" class="display dataTable" aria-describedby="example_info">
<thead>
<tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 130px;" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">Rendering engine</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 177px;" aria-label="Browser: activate to sort column ascending">Browser</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 170px;" aria-label="Platform(s): activate to sort column ascending">Platform(s)</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 108px;" aria-label="Engine version: activate to sort column ascending">Engine version</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 75px;" aria-label="CSS grade: activate to sort column ascending">CSS grade</th></tr>
</thead>
<tfoot>
<tr><th rowspan="1" colspan="1">Rendering engine</th><th rowspan="1" colspan="1">Browser</th><th rowspan="1" colspan="1">Platform(s)</th><th rowspan="1" colspan="1">Engine version</th><th rowspan="1" colspan="1">CSS grade</th></tr>
</tfoot>
<tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="gradeA odd" id="7">
<td class=" sorting_1">Gecko</td>
<td class=" ">Firefox 1.0</td>
<td class=" ">Win 98+ / OSX.2+</td>
<td class="center ">1.7</td>
<td class="center ">A</td>
</tr><tr class="gradeA even" id="8">
<td class=" sorting_1">Gecko</td>
<td class=" ">Firefox...JavaScript
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );