Link to home
Start Free TrialLog in
Avatar of Opeyemi AbdulRasheed
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:
<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>&nbsp; &nbsp;
						<a class="green" href="#">
							<i class="ace-icon fa fa-pencil bigger-130"></i>
						</a>&nbsp; &nbsp;
						<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>&nbsp; &nbsp;
								</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>

Open in new window


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();			
		});

Open in new window

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

For this, you'll need to set your DataTable to retrieve it's data from the server, probably as an AJAX request.  Currently, you're hardcoding the data in so it's being retrieve from the DOM ... there's no dynamic data to refresh.

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.
Avatar of Opeyemi AbdulRasheed
Opeyemi AbdulRasheed

ASKER

Alright sir. I'll do that as soon as I'm back home. Out of home now.

Thank for everything
Hello Sir,

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);

?>

Open in new window


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) );
?>

Open in new window

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>

Open in new window

And then finally initialise your DataTable with the AJAX setup:

$('#dynamicTable').DataTable({
    'ajax' : 'yourScript.php',
});

Open in new window

Once you've got that working, you will then be able to tell the DataTable to reload it's data whenever you need to
Thanks for the response.

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) );
?>

Open in new window


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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Oh my God! You're an angel. The table populated the data magically.

I'm indebted to you sir.
The Most Valuable Programmer of the Year.