Rendering DataTables and its data

Rushdi

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>

kthorngren

Are you using row().remove() to remove the row?

Kevin

Rushdi

I want to refresh the table or specific row when I am updating/Adding/Deleting a row.
Would you please show me an example

kthorngren

I want to refresh the table or specific row when I am updating/Adding/Deleting a row.

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

Rushdi

  var SubmitForm = function (form) {
  var ForumId = $('#forumId').val();


    $.validator.unobtrusive.parse(form)
        var ajaxConfig = {
            type: 'POST',
            url: "/Forum/AddOrEdit",
            data: new FormData(form),
            processData: false,
            contentType: false,
            success: function (response) {
                if (ForumId > 0) {
                    $('#row_' + ForumId + ' a').text(response.message.title);
                    $('#row_' + ForumId + ' .forumDescription').text(response.message.description);
                    $('#row_' + ForumId + ' .forumLogo').css('background-image', 'url(' + response.message.imageUrl + ')');
                    $('#AddOrEditModal').modal('hide');
                }
                if (ForumId == 0) {
                    window.location.reload();
                    $('#AddOrEditModal').modal('hide');
                }

                //$('#MyEditModal').modal('hide');

            }

        }

if ($(form).valid()) {

        $.ajax(ajaxConfig);
 }

return false;
}

Rushdi

I am Using this method to Add/Edit a Forum. This method will be called onsubmit form

colin

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

Rushdi

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

Rushdi

    var ConfirmDelete = function (forumId, title) {

    $('#modalTitle').text("Delete Forum");
    $('#hiddenForumId').val(forumId);
    $('#displayConfirmMsg').text(" Are you sure you want to delete " + title + " Forum ?");
    $('#myModal').modal('show');
}


var DeleteForum = function () {
    $('#loaderDiv').show();
    var ForumId = $('#hiddenForumId').val();

    $.ajax({
        url: "/Forum/Delete",
        type: 'Delete',
        data: { forumId: ForumId },
        success: function (message) {
            $('#loaderDiv').hide();

            $("#row_" + ForumId).remove();
            window.location.reload();
            $('#myModal').modal('hide');
        }
    })

  }

kthorngren

Looks like you are directly updating the DOM table. Datatables won't know about these changes. You can use row().invalidate() or rows().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() or cell().data().

If this doesn't help then as Colin requested please post a test case we can look at.

Kevin

Rushdi

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

colin

It sounds like you might want to consider using Editor - it would be a good fit for this.

Colin

Rushdi

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?

rf1234

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 ...