<!DOCTYPE html>
<html lang="pt-pt">
<head>
<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>
<script type="text/javascript" src="./DataTables/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$('button').click(function(event)
{
event.preventDefault();
var modal = $('#myModal').modal('show');
modal.on('show.bs.modal', function (event){
var t = $('table').DataTable( { ajax:
{
url:'<?php echo "ajax.php";?>',
data : { 'tabela' : 'dados'},
type:'json',
method : 'POST',
success : function(dado)
{
t.rows.add(dado).draw(true);
}
}
});
});
});
}
);
</script>
</head>
<body>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table id="tbmd">
<thead>
<tr>
<th>coluna 1</th>
<th>coluna 2</th>
<th>coluna 3</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<table id="tb">
<thead>
<tr>
<th>coluna 1.1</th>
<th>coluna 2.2</th>
<th>coluna 3.3</th>
</tr>
</thead>
</table>
</body>
</html>
modal does not appear. The import are in the directories that are correct.