Rendering DataTables and its data

Rendering DataTables and its data

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

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

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

    Kevin

  • RushdiRushdi Posts: 13Questions: 3Answers: 0

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • RushdiRushdi Posts: 13Questions: 3Answers: 0
    edited March 2020
      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;
    }
    
  • RushdiRushdi Posts: 13Questions: 3Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • RushdiRushdi Posts: 13Questions: 3Answers: 0
    edited March 2020

    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

  • RushdiRushdi Posts: 13Questions: 3Answers: 0
        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');
            }
        })
    
      }
    
  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • RushdiRushdi Posts: 13Questions: 3Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • RushdiRushdi Posts: 13Questions: 3Answers: 0

    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?

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

This discussion has been closed.