Refresh Datatable and paging data after editing data

egladstone

Am using the Datatable plugin , but i am not using the Editor plugin. I have the controller where it populates the model data from the database repository . It's not ajax call. I select the rows in the datatable and click on the Edit button and it opens up the model/view . after i submit the data , i have a code to load the page but the datatable is not refreshed. could you please advise. Is there anything we can do to refresh the table without the ajax call?. I tried table.draw () but this is not working.

colin

Hi @egladstone ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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

egladstone

Here's the code

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />

<link rel="stylesheet" type="text/css" href="~/Content/Styles/TableSelection.css" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" />

@using PagedList;
@using PagedList.Mvc;
@using Career.WebUI.Models;

@model TemplatesListViewModel

@{

Layout = "~/Views/Shared/_AdminLayout.cshtml";

}

$(document).ready(function () { $('#example').DataTable({ var table = $('#example').DataTable(); $('#example tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); }); }); function btnEdit(btn) { var table = $('#example').DataTable(); var values = new Array(); var oData = table.rows('.selected').data(); for (var i = 0; i < oData.length ; i++) { values.push(oData[i][1]); } $('input[name=txthidden]').val(values.join(",")); }

@using (Html.BeginForm("Edit", "Admin")) {

Completed :

@Html.RadioButtonFor(m => m.Completed, "Yes", "Yes") Yes

@Html.RadioButtonFor(m => m.Completed, "No", "No") No

@Html.ActionLink("Cancel ", "Index", new { calendarID = Session["calendarID"], personID = Session["personID"] }, new { @class = "btn btn-primary" })

}

<

div style="width:100%" id="content">

        <table id="example" class="display" cellspacing="0">
            <thead>
            <tr>
                <th class="text-center"></th>
                <th class="text-left" hidden="hidden">ID</th>
                <th class="text-center">Student Number</th>
                <th class="text-center">Student Name</th>
                <th class="text-center">Completed</th>
                <th class="text-center">Withdraw Date</th>


            </tr>
                </thead>
            <tbody>

            @{

                int i = 0;
                foreach (var item in Model.CustomStudent)
                {
                    i++;
                    if (item.Completed == "Yes")
                    {
                        Model.ISYesChecked = true;
                        Model.IsNoChecked = false;
                    }
                    else
                    {
                        Model.IsNoChecked = true;
                        Model.ISYesChecked = false;
                    }
                    <tr>
                        <td></td>

                        <td hidden="hidden">@item.customID</td>


                        <td class="text-center">@item.StudentNumber</td>

                        <td class="text-center">@item.StudentName</td>
                        <td class="text-center">




                            @Html.RadioButton("Completed" + i, "Yes", Model.ISYesChecked, new { id = "Yes" + i, disabled = "true" })
                            @Html.Label("Yes" + i, "Yes") &nbsp;&nbsp;
                            @Html.RadioButton("Completed" + i, "No", Model.IsNoChecked, new { id = "No" + i, disabled = "true" })
                            @Html.Label("No" + i, "No")


                        </td>
                        <td class="text-center">@item.WithDrawDate</td>



                    </tr>


                }
            }

</tbody>

        </table>

Controller.cs

[HttpPost]
public ActionResult Edit(FormCollection form, string txthidden, TemplatesListViewModel Editview)
{

Domain.Entities.Career cp = new Domain.Entities.Career();
if (ModelState.IsValid)
{

            cp.ID = customID;
            repository.Save(cp);

            TempData["message"] = "Changes are updated successfully!";



            return RedirectToAction("Index", new RouteValueDictionary(
new { controller = "Admin", action = "Index", school = Editview.School, page = 1 }));

        }

}

public ActionResult Index(string calendarID, string personID, int page = 1)
    {
        if (calendarID != null && personID != null)
        {
            Session["calendarID"] = calendarID;
            Session["personID"] = personID;
        }
        int endYear = repository.ActiveYear();


       TemplatesListViewModel viewmodel = new TemplatesListViewModel
       {
           EndYear = endYear,
            CustomStudent = repository.CustomStudent
       .Where(p => p.CalendarID != 0 && p.CalendarID == Convert.ToInt32(Session["calendarID"].ToString()))

};
return View(viewmodel);
}