Opeyemi AbdulRasheed
asked on
How to Refresh DataTable After Modal Insert
How can I refresh dataTable after insert with modal?
My table is as follows:
My Ajax:
My table is as follows:
<table id="dynamicTable" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">
<label class="pos-rel"><span class="lbl">#</span></label>
</th>
<th>Staff Name</th>
<th>User ID</th>
<th class="hidden-480">Password</th>
<th class="hidden-480">Role</th>
<th class="hidden-480">Class Assigned</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
if($total_rows > 0)
{
$cnt = 1;
foreach($result as $row)
{
$id = $row['UserId'];
$staff_name = $row['Initials'];
$staff_loginid = $row['Username'];
$staff_password = $row['Password'];
$staff_role = $row['Role'];
$class_assigned = $row['ClassAssigned'];
if($staff_role == 'Admin'){
$role = "<div class='badge badge-info'>Admin</div>";
}else if($staff_role == 'Form Master'){
$role = "<div class='badge badge-warning'>Form Master</div>";
}else {
$role = "<div class='badge badge-success'>Subject Teacher</div>";
}
?>
<tr>
<td><?php echo $cnt;?></td>
<td><?php echo $row['Initials'];?></td>
<td><?php echo $row['Username'];?></td>
<td class="hidden-480"><?php echo $row['Password'];?></td>
<td class="hidden-480"><?php echo $role;?></td>
<td class="hidden-480"><?php echo $row['ClassAssigned'];?></td>
<td><div class="hidden-sm hidden-xs action-buttons">
<a class="blue" href="#">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
</a>
<a class="green" href="#">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<a class="red tooltip-error" href="#delete_<?php echo $id;?>" data-toggle="modal">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
<div class="hidden-md hidden-lg">
<div class="inline pos-rel">
<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown" data-position="auto"><i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
</button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
<li>
<a href="#" class="tooltip-info" data-rel="tooltip" title="View"><span class="blue"><i class="ace-icon fa fa-search-plus bigger-120"></i></span></a>
</li>
<li>
<a class="green" href="update_staff_info.php?edit_staff&id=<?php echo $staff_loginid; ?>&name=<?php echo $staff_name; ?>">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
</li>
<li>
<a href="#delete_<?php echo $id;?>" data-toggle="modal" class="tooltip-error" data-rel="tooltip" title="Delete"><span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a>
</li>
</ul>
</div>
</div>
</td>
</tr>
<?php $cnt=$cnt+1;}} ?>
</tbody>
</table>
My Ajax:
$('#add_staff').click(function() {
$.ajax({
url : 'staff_data.php',
method : 'post',
data : $('#newStaff-Form').serialize(),
}).done(function(response) {
$('#response').html(response);
$('#response').html(response);
$('#dynamicTable').DataTable().ajax.reload();
});
//$('#staff_table').find("tr:gt(0)").remove();
});
ASKER
Alright sir. I'll do that as soon as I'm back home. Out of home now.
Thank for everything
Thank for everything
ASKER
Hello Sir,
This is the query that feed my DataTable:
Thanks alot
This is the query that feed my DataTable:
<?php
$query = "SELECT Users.UserId, Users.Initials, Users.Username, Users.Password, Users.Role, tbl_classes.Class_Name as ClassAssigned FROM Users LEFT JOIN tbl_classes ON Users.ClassAssigned=tbl_classes.Class_ID ORDER BY Role ASC";
$statement = $conn->prepare($query);
$statement->execute();
$result = $statement->get_result();
$total_rows = mysqli_num_rows($result);
?>
Thanks alot
OK. You're going to need to edit your script so that it builds the data in a way that the DataTable can understand. The data needs to be wrapped in an element called data and then json_encoded.
<?php
$query = "SELECT Users.UserId, Users.Initials, Users.Username, Users.Password, Users.Role, tbl_classes.Class_Name AS ClassAssigned FROM Users LEFT JOIN tbl_classes ON Users.ClassAssigned=tbl_classes.Class_ID ORDER BY Role ASC";
$statement = $conn->prepare($query);
$statement->execute();
$users = $statement->get_result();
$response = array(
'data' => $users->fetch_all()
);
die( json_encode($response) );
?>
Then set up your HTML like so:<table id="dynamicTable">
<thead>
<tr>
<td>ID</td>
<td>Initials</td>
<td>Username</td>
<td>Password</td>
<td>Role</td>
<td>Class Assigned</td>
</tr>
</thead>
<tbody></tbody>
</table>
And then finally initialise your DataTable with the AJAX setup:$('#dynamicTable').DataTable({
'ajax' : 'yourScript.php',
});
Once you've got that working, you will then be able to tell the DataTable to reload it's data whenever you need to
ASKER
Thanks for the response.
I believe not only the following will be in the script :
I honestly don't know how to make DataTable coordinate the <tbody> part.
Can you help me with the previously posted table to solve the problem?
Words cannot express my gratitude.
I believe not only the following will be in the script :
<?php
$query = "SELECT Users.UserId, Users.Initials, Users.Username, Users.Password, Users.Role, tbl_classes.Class_Name AS ClassAssigned FROM Users LEFT JOIN tbl_classes ON Users.ClassAssigned=tbl_classes.Class_ID ORDER BY Role ASC";
$statement = $conn->prepare($query);
$statement->execute();
$users = $statement->get_result();
$response = array(
'data' => $users->fetch_all()
);
die( json_encode($response) );
?>
I honestly don't know how to make DataTable coordinate the <tbody> part.
Can you help me with the previously posted table to solve the problem?
Words cannot express my gratitude.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Oh my God! You're an angel. The table populated the data magically.
I'm indebted to you sir.
I'm indebted to you sir.
ASKER
The Most Valuable Programmer of the Year.
Show us the code for how you're setting up your DataTables. That will need to change to call a server-side script. Then you'll be able to call ajax.reload() on the DataTable to refresh the data.