Rendering DataTables and its data
Rendering DataTables and its data
Rushdi
Posts: 13Questions: 3Answers: 0
I have created a table using DataTable library, I just want to render and refresh the table once any row has been deleted,
Note That I don't want to use table.ajax.reload() method
function to create the table
$(function() {
$dataTable = $("#forumIndexTable").DataTable();
});
Here is my table
@model Forum_Application.Models.ForumViewModel.ForumIndexModel
<table class="table table-hover" id="forumIndexTable">
<thead>
<tr>
<th>Forum</th>
@if (User.IsInRole("Admin"))
{
<th>Edit/Delete Forum</th>
}
</tr>
</thead>
<tbody id="tbody">
@foreach (var forum in Model.ForumList)
{
<tr id="row_@forum.Id">
<td>
<div class="forumLogo" style="background-image:url(@forum.ImageUrl)"></div>
<div class="forumData">
<div class="forumTitle">
<a asp-controller="Forum" asp-action="Topic" asp-route-id="@forum.Id" id="testTitle">@forum.Title</a>
</div>
<div class="forumSubTitle">
@if (forum.HasRecentPost)
{
<div class="hasRecentPost"><span>Hot</span></div>
}
</div>
</div>
</td>
@if (forum.isAdmin)
{
<td>
<span class="btn btn-danger" onclick="ConfirmDelete(@forum.Id,'@forum.Title')"><i class="fa fa-trash"></i> Delete</span>
<span class="btn btn-warning" onclick="AddOrEditForumDialog('@Url.Action("AddOrEdit","Forum")/@forum.Id')"><i class="fa fa-edit"></i> Edit</span>
</td>
}
</tr>
}
</tbody>
</table>
This discussion has been closed.
Answers
Are you using
row().remove()to remove the row?Kevin
I want to refresh the table or specific row when I am updating/Adding/Deleting a row.
Would you please show me an example
What are you using to add or delete a row? There are many ways to do this and your method will determine the process needed to refresh the table.
Kevin
I am Using this method to Add/Edit a Forum. This method will be called onsubmit form
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
My example is exactly like this on the following link(http://live.datatables.net/zakozoka/3/edit)
What my application supposed to do is once edit button is clicked, then a modal dialog will appear in with all data to be edited, so once user clicks on save changes button on the Editing dialog, directly row have to be updated. same goes for deleting button a confirmation Modal dialog will show once user clicks on confirm row have to be deleted from the datatable. I have written the code in the above comment where the ajax do preform the Editing function by the calling the AddOrEdit Action.
I would also include the ajax which preform the Delete Function as well in the next comment. Hope you can help me thanks in advance
Looks like you are directly updating the DOM table. Datatables won't know about these changes. You can use
row().invalidate()orrows().invalidate()to have Datatables refresh its data cache after you make the changes.Or you can use Datatables APIs to make the updates, like
row().remove(),row().data()orcell().data().If this doesn't help then as Colin requested please post a test case we can look at.
Kevin
My application system works almost same like the following example in the following link (http://live.datatables.net/zakozoka/3/edit)
What my web application supposed to do is once a delete button is clicked, a Modal delete dialog will show for a confirmation, once user confirmed the row supposed to be removed from the table, same goes for the editing button where the row should be updated. I have included both the AddingOrEditing and Delete JavaScript functions which perform this actions using the Ajax helper.
the Ajax works fine to update the data, however the table won't be updated unless I call this function ( window.location.reload(); ) on Ajax response success.
Note: I have included above in above comments the JavaScript AddingOrEditing and Delete functions
Thanks in advance
It sounds like you might want to consider using Editor - it would be a good fit for this.
Colin
Dear Colin, Thanks for your reply. So means for normal datatable there is no method to update/refresh a specific row once ajax is success?
No, it doesn't mean that. If you take a look at @kthorngren's comment you'll see a multitude of methods to manipulate row content - and he didn't even mention all of them ...