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.
This discussion has been closed.
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