DataTables update another cell button on click
by B__D
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap-collapse.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap-transition.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#thisTable').DataTable({
"columnDefs": [{
"targets": -2,
"data": null,
"defaultContent": "<button>Run</button>"
}, {
"class": "details-control",
"targets": -1,
"data": null,
"defaultContent": "<button disabled>Show Log</button>" // Disabled initially
}]
});
var colCount = $('#thisTable').dataTable().fnSettings().aoColumns.length;
var toggleButtonColIndex = table.column('.details-control').index(); // Get column based on class name;
$('#thisTable tbody').on('click', 'button', function() {
var td = $(this).closest('td');
var buttonType = td.attr('id');
if (buttonType == "deploy-button") {
deployButton(this);
} else {
toggleButton(this);
}
});
// Deploy for this row
function deployButton(button) {
var label = ($(button).parent().siblings(":first")).text();
var version = ($(button).parent().prev().children().attr("selected", "selected")).val();
$.ajax({
success: function() {
showLog(button);
},
error: function() {
alert("Could not complete request.");
}
});
}
//...