Update datatable bootstrap
Update datatable bootstrap
franco1968
Posts: 2Questions: 0Answers: 0
Good morning,
in this example I would need to update the datatable, after updating the database (url: "layout/writefile.php") without closing the same datatable and reopening it.
Can you give me a suggestion?
Thanks
<?php
header('Content-type: text/html; charset=utf-8');
<?php
>
<! DOCTYPE html>
Bootstrap 4 datatable example
?>
<script src="script/script.js?v=<?=date('YmdHis') ?>"> </script>
</head>
<style>
table{
width: 100%;
}
#example_filter{
float: right;
}
#example_paginate{
float: right;
}
label {
display: inline-flex;
margin-bottom: .5rem;
margin-top: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>City of birth</th>
s<th>Age of birth</th>
<th> Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Leo Messi</td>
<td>Football player</td>
<td>Argentina</td>
<td>1985/01/01</td>
<td>
<a href="#" id="newage" onclick="getModal(this.id)">20</a> </td>
</tr>
<tr>
<td>Cristiano Ronaldo</td>
<td>Football player</td>
<td>Portogallo</td>
<td>1985/01/01</td>
<td>
<a href="#" id="newage" onclick="getModal(this.id)">30</a> </td>
</tr>
<tr>
<td>Alessandro Del Piero</td>
<td>Football player</td>
<td>Italia</td>
<td>1956/09/23</td>
<td>
<a href="#" id="newage" onclick="getModal(this.id)">40</a> </td>
</tr>
<!-- Modal -->
<div class="modal fade" id="dialog" 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">Select the years of the footballer</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
this.api().columns.adjust()
},
dom: 'Bflrtip',
scrollY: '400px',
scrollCollapse: true,
paging: false,
"autoWidth": true,
"destroy": true,
//"language": {
// "url": "/assets/js/datatables/datatables.italian.lang",
// "decimal": ",",
// "thousands": "."
//},
"bProcessing": false,
"info": false,
"searching": true
});
});
</script>
</body>
</html>
****
function getModal()
{
$.ajax({
type: "GET",
url: "layout/dialog.php",
//data: "cdcode="+cdcode,
dateType: 'html',
cache: false,
success: function(msg) {
$('#dialog').find('.modal-body').html(msg);
$('#dialog').modal();
}
});
}
function saveChange()
{
$.ajax({
type: "GET",
//url: "layout/writefile.php",
//data: "cdcode="+cdcode,
dateType: 'html',
cache: false,
success: function(msg) {
$('.modal-backdrop').remove();
$('#dialog').hide();
}
});
}
<!-- Modal -->
<div class="panel panel-primary">
<div class="panel-heading">
<div class="modal-body">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>chosen.....</option>
<?php
for( $i=1; $i<=100; $i++ )
{
?>
<option value="years"><?=$i ?></option>
<?php
}
?>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="saveChange()">Save changes</button>
</div>
</div>
</div>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Replies
It would be worth looking at Editor, as that's implemented to easily update a DataTable. We don't support any other method of updating the table,
Colin