<!DOCTYPE html>
<html>
<head>
<!--Got most includes from https://www.datatables.net/download/ -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.0.0/css/autoFill.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.0.0/css/keyTable.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Datatable AutoFill and Editable</h1>
<p>Highlight changed fields.</p>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Age (AutoFill)</th>
<th>Qty (AutoFill and Editable)</th>
<th>Cost (Editable)</th>
</tr>
</thead>
<tr>
<td>1</td>
<td data-original-value="11">11</td>
<td data-original-value="1"><a href="#" data-type="text" data-pk="1" class="editable" data-url="" data-title="Edit Quantity">1</a></td>
<td data-original-value="1.99"><a href="#" data-type="text" data-pk="1" class="editable" data-url="" data-title="Edit Quantity">1.99</a></td>
</tr>
<tr>
<td>2</td>
<td data-original-value="22">22</td>
<td data-original-value="2"><a href="#" data-type="text" data-pk="2" class="editable" data-url="" data-title="Edit Quantity">2</a></td>
<td data-original-value="2.99"><a href="#" data-type="text" data-pk="1" class="editable" data-url="" data-title="Edit Quantity">2.99</a></td>
</tr>
<tr>
<td>3</td>
<td data-original-value="33">33</td>
<td data-original-value="3"><a href="#" data-type="text" data-pk="3" class="editable" data-url="" data-title="Edit Quantity">3</a></td>
<td data-original-value="3.99"><a href="#" data-type="text" data-pk="1" class="editable" data-url="" data-title="Edit Quantity">3.99</a></td>
</tr>
</table>
<!--Got most includes from https://www.datatables.net/download/ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.0.0/js/dataTables.autoFill.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.0.0/js/autoFill.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.0.0/js/dataTables.keyTable.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="script.js"></script>
</body>
</html>
(function ($) {
var datatable = $('.table').dataTable({
"columns": [
{ "name": "id" },
{ "name": "age" },
{ "name": "qty" },
{ "name": "cost" },
],
"bPaginate": false,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var setCell = function(response, newValue) {
var table = new $.fn.dataTable.Api('.table');
var cell = table.cell('td.focus');
var cellData = cell.data();
var div = document.createElement('div');
div.innerHTML = cellData;
var a = div.childNodes;
a.innerHTML = newValue;
console.log('jml a new ' + div.innerHTML);
cell.data(div.innerHTML);
highlightCell($(cell.node()));
// This is huge cheese, but the a has lost it's editable nature. Do it again.
$('td.focus a').editable({
'mode': 'inline',
'success' : setCell
});
};
$('.editable').editable(
{
'mode': 'inline',
'success' : setCell
}
);
},
"autoFill" : {
"columns" : [1, 2]
},
"keys" : true
});
addCellChangeHandler();
addAutoFillHandler();
function highlightCell($cell) {
var originalValue = $cell.attr('data-original-value');
if (!originalValue) {
return;
}
var actualValue = $cell.text();
if (!isNaN(originalValue)) {
originalValue = parseFloat(originalValue);
}
if (!isNaN(actualValue)) {
actualValue = parseFloat(actualValue);
}
if ( originalValue === actualValue ) {
$cell.removeClass('cat-cell-modified').addClass('cat-cell-original');
} else {
$cell.removeClass('cat-cell-original').addClass('cat-cell-modified');
}
}
function addCellChangeHandler() {
$('a[data-pk]').on('hidden', function (e, editable) {
var $a = $(this);
var $cell = $a.parent('td');
highlightCell($cell);
});
}
function addAutoFillHandler() {
var table = $('.table').DataTable();
table.on('autoFill', function (e, datatable, cells) {
var datatableCellApis = $.each(cells, function(index, row) {
var datatableCellApi = row[0].cell;
var $jQueryObject = $(datatableCellApi.node());
highlightCell($jQueryObject);
});
});
}
})(jQuery);
.cat-cell-modified {
font-style: italic;
font-weight: bold;
background-color: #ffffc5;
}
.cat-cell-original {
font-style: normal;
font-weight: normal;
color: #747474;
}