var myJSON = {
"customers": [{
"id": 100,
"first": "Mike",
"last": "Johnson",
"email": "mjohnson@gmail.com",
"position": "Consultant"
},
{
"id": 101,
"first": "John",
"last": "Dunn",
"email": "jdunn@gmail.com",
"position": "Programmer"
},
{
"id": 109,
"first": "Lisa",
"last": "Morgan",
"email": "lmorgan@gmail.com",
"position": "Secretary"
},
{
"id": 233,
"first": "Kris",
"last": "Bradley",
"email": "kbradley@gmail.com",
"position": "Programmer"
},
{
"id": 57,
"first": "Dave",
"last": "Hart",
"email": "dhart@gmail.com",
"position": "Supervisor"
}
]
};
$(document).ready(function() {
generateTbl();
});
function generateTbl() {
var jsonData = myJSON.customers,
buildTbl = "<div class='table-responsive'><table class='table table-striped' id='customers'><thead><tr><th>Customer ID</th><th>First Name</th><th>Last Name</th><th>Email</th><th>Position</th><th>Delete</th></thead><tbody>";
for (var key in jsonData) {
buildTbl += "<tr id='row_" + jsonData[key].id + "'><td data-id='id'>" + $.trim(jsonData[key].id) + "</td>";
buildTbl += "<td data-id='first'>" + $.trim(jsonData[key].first) + "</td>";
buildTbl += "<td data-id='last'>" + $.trim(jsonData[key].last) + "</td>";
buildTbl += "<td data-id='email'>" + $.trim(jsonData[key].email) + "</td>";
buildTbl += "<td data-id='position'>" + $.trim(jsonData[key].position) + "</td>";
buildTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm customer_delete'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
}
buildTbl += "</tbody></table></div>";
$('#customers_data').empty().append(buildTbl);
buildDataTable('customers', [5], 5);
}
function buildDataTable(tblID, columnsArray, displayLength) {
$('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"iDisplayLength": displayLength,
"aoColumnDefs": [{
'bSortable': false,
'aTargets': columnsArray
}]
});
}
$('#customers_data').on('click', '#customers :button.customer_delete', deleteCustomer);
function deleteCustomer() {
var recordID = $(this).closest('tr').attr('id'), // Get record ID.
targetTr = $(this).parents('tr');
$(this).confirmation({
rootSelector: '[data-toggle=confirmation]',
placement: 'bottom',
singleton: true,
title: 'Do you want to remove this account?',
onConfirm: function() {
if (recordID) {
var table = $('#customers').DataTable(); // Select DataTable by ID.
table.row(targetTr).remove().draw(); // Remove record from DataTable.
}
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Hearing Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.7/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: JS and CSS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: JS and CSS for DataTables. *** -->
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Welcome to Main Page</div>
<div class="panel-body">
<div id="customers_data" class="table-responsive"></div>
</div>
</div>
</div>
</body>
</html>As you can see in my example first time you click on delete button dialog is not showing. Second time will show. What could be the reason why dialog is not showing on the first click? I'm not sure if that has to do anything with dynamically built table? If anyone knows solution for this please let me know.
