Display button in state in Datatables with cell value
I have a table using Datatables and the last column shows the default a 0, but can also show the value> = 1, if it has a value of 0, it shouldn't do anything, but once it is = = 1 than I I want to display a button that selects a value from Datatable and opens Modal.
Not sure how to make this button clicked.
Below is my Datatable code incl. HTML.
// Manual Modal
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
});
// Datatables Code
$(document).ready(function() {
$('#DTResTableList_1').DataTable({
"ajax": {
url: 'data.inc.php',
method: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dataSrc: ""
},
paging: false,
scrollY: 400,
select: true,
'columns': [{
'data': 'TABLE_NUMBER'
},
{
'data': 'STATION'
},
{
'data': 'GUESTS'
},
{
'data': 'T_STATUS'
},
{
'data': 'MINUTES_SEATED'
},
{
'data': 'MINUTES_OVERDUE'
}
]
});
setInterval(function() {
$('#DTResTableList_1').DataTable().ajax.reload(null, false); // user paging is not reset on reload
}, 5000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<table class="table table-sm table-striped table-hover" id="DTResTableList_1" style="width: 100%;">
<thead>
<tr>
<th class="" data-toggle="tooltip" data-placement="top" title="Table Number">Table</th>
<th class="" data-toggle="tooltip" data-placement="top" title="Waiterstation">Station</th>
<th class="" data-toggle="tooltip" data-placement="top" title="Guests on Table">G</th>
<th class="" data-toggle="tooltip" data-placement="top" title="Table Stauts">Status</th>
<th class="" data-toggle="tooltip" data-placement="top" title="Minutes Seated">Minutes</th>
<th class="" data-toggle="tooltip" data-placement="top" title="Overdue">Button</th>
</tr>
</thead>
</table>
</div>
source to share
Ok, here's closer to what you asked for. This is what it puts the buttons in the last column for if the employee is under 40. Again, the code gets the data for the row and then displays the employee's name. Notice how I used column rendering.
http://jsbin.com/gobonec/edit?js,output
$(document).ready(function () {
var table = $('#example').DataTable({
"data": dataStore.data,
"columns": [
{ "data": "name" },
{ "data": "age" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" },
{ "data": null },
],
columnDefs: [{
// puts a button in the last column
targets: [-1], render: function (a, b, data, d) {
if (data.age < 40) {
return "<button type='button'>Go</button>";
}
return "";
}
}],
});
table.on("click", "button",
function () {
alert(table.rows($(this).closest("tr")).data()[0].name);
});
});
source to share
From DataTables Callbacks :
fnCreatedRow:
This function is called when a TR element (and all TD children) is created, or registered when using a DOM source, allowing manipulation of a TR element (adding classes, etc.).
This means that you can add a parameter like this when creating the DataTable:
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
if (+aData.MINUTES_OVERDUE > 0) {
$(nRow).find('td:last')
.replaceWith('<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" val="'
+ aData.MINUTES_OVERDUE + '">Launch demo modal</button>');
}
},
And changing your modal handler shown in .bs.modal to:
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').val($(e.relatedTarget).attr('val')).focus();
});
Explanation: whenever a string is created:
- check the content of the last element
- if it is greater than zero, replace the table cell with a button that has an attribute containing the value of interest
whenever the modality is displayed:
- get attribute from linked button and put it in input field
The event handler for show.bs.modal must be inside the document.
source to share
I have a solution that uses row selector and button extensions. In my example, if the user is over 40, the button is disabled and hidden. if they are younger, display it and turn it on. Clicking on a button gets a data object and uses it to display the person's name
http://live.datatables.net/kudotiqu/1/edit
$(document).ready( function () {
var table = $('#example').DataTable({select:"single",dom:"tB",
buttons:[{text:"Do It",
extend:"selected",
action:function( e, dt, node, config){
alert( dt.rows({selected:true}).data()[0][0]);}}]
});
table.on( 'select', function ( e, dt, type, indexes ) {
var s = dt.settings();
var g = dt.rows(indexes).data()[0] ;
if(parseInt(g[3]) > 40) {
s.buttons().enable(false);
$(s.buttons()[0].node).css("display","none");
}
else {
s.buttons().enable(true);
$(s.buttons()[0].node).css("display", "");
}
} );
});
source to share