Updating datatables with new list RSS

• • Reply
  

  samarmir

  Member

  120 Points

  336 Posts

  Updating datatables with new list

  May 10, 2012 03:57 PM|LINK

  Hi 

  Hi I have a controller (dinners) that fetches some data and return a view (index) with a list object (dinners). 

  Im using datatables (datatables.net) to show the result list. Above the result list I have a drop down list where the user can change country. This drop down list fires an ajax call with the country seleted. The ajax calls an actionresult (changecountry) in the same controller (dinners), which fetches relevant data according to selected country and finally returns the (same index) view, with an list object (dinners).

  my problems is that the datatable on the view is not showing updated result list. 

  Before sending the dinners object list (from changecountry actionresult) I can see that the list has updated values, but the updated list does not get shown on the datatable. 

  Thanks for reading!
• • Reply
  

  rodrigosor

  Member

  22 Points

  6 Posts

  Re: Updating datatables with new list

  May 10, 2012 04:15 PM|LINK

  Howdy,

  I found an interesting article about jQuery DataTables and ASP.NET MVC Integration (http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part)

  []'s n' good luck
  Rodrigo
• • Reply
  

  ignatandrei

  All-Star

  135142 Points

  21676 Posts

  Moderator

  MVP

  Re: Updating datatables with new list

  May 10, 2012 08:38 PM|LINK

  samarmir

  but the updated list does not get shown on the datatable. 

  simplest code please

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  Young Yang -...

  All-Star

  21343 Points

  1818 Posts

  Microsoft

  Re: Updating datatables with new list

  May 17, 2012 03:20 AM|LINK

  You question seems like cascading dropdownlist, you can refer to this article: http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx

  Hope this helpful
  Regards

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  
• • Reply
  

  bruce (sqlwo...

  All-Star

  36870 Points

  5450 Posts

  Re: Updating datatables with new list

  May 17, 2012 03:37 AM|LINK

  you most like have no code client side to do anything with the response from the ajax call.

  bruce (sqlwork.com)
• • Reply
  

  samarmir

  Member

  120 Points

  336 Posts

  Re: Updating datatables with new list

  May 17, 2012 08:50 AM|LINK

  Hi everyone.

  I got the problem solved.

  Here is the solution. 

  The View

  <script language="javascript" type="text/javascript">
  
      $(document).ready(function () {
  
  
          var oEmployeesTable = $('#employees').dataTable({
              "bJQueryUI": true,
              "bServerSide": true,
              "sAjaxSource": "/Home/MasterDetailsAjaxHandler"
          });
  
          $("#dialog").dialog({ autoOpen: false });
  
          $("#add").button()
                      .click(function (e) {
                          $("#dialog").dialog("open");
                      });
  
          $("#save").button()
                      .click(function (e) {
                          alert($("#name").val());
                          e.preventDefault();
                          e.stopPropagation();
                          $.ajax({
                              url: "/Home/AddItem",
                              data: {
                                  //name: function () { $("#name").val(); }
                                  name: "" + $("#name").val()
                              },
                              success: function () {
                                  $("#dialog").dialog("close");
                                  oEmployeesTable.fnDraw();
                              }
                          });
  
                      });
  
      });
  </script>
  }
  
      <div id="dialog" title="Add new item">
      <label for="name">Title</label>
      <input type="text" id="name" name="name" value=" " />
      <button type="button" id="save">Submit</button>
      </div>
  
      <button id="add">Add</button>
      <div id="demo">
  
          <table id="employees" class="display">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>Employee</th>
                      <th>Position</th>
                  </tr>
              </thead>
              <tbody>
              </tbody>
          </table>
      </div>

  The HomeController

      public class HomeController : Controller
      {
          /// <summary>
          /// Action that handles initiall request and returns empty view
          /// </summary>
          /// <returns>Home/Index view</returns>
          public ActionResult Index()
          {
              return View();
          }
  
          public ActionResult Refresh()
          {
              return View();
          }
  
          public ActionResult AutoReload()
          {
              return View();
          }
  
          public ActionResult Ajax()
          {
              return View();
          }
  
          public string AddItem(string name)
          {
              DataRepository.AddItem(name);
              return "<Root></Root>";
          }
  
          /// <summary>
          /// 
          /// </summary>
          /// <param name="param"></param>
          /// <param name="CompanyID"></param>
          /// <returns></returns>
          public ActionResult MasterDetailsAjaxHandler(JQueryDataTableParamModel param, int? CompanyID)
          {
  
              var employees = DataRepository.GetEmployees();
  
              //"Business logic" methog that filter employees by the employer id
              var companyEmployees = (from e in employees
                                      where (CompanyID == null || e.CompanyID == CompanyID)
                                      select e).ToList();
  
              //UI processing logic that filter company employees by name and paginates them
              var filteredEmployees = (from e in companyEmployees
                                       where (param.sSearch == null || e.Name.ToLower().Contains(param.sSearch.ToLower()))
                                       select e).ToList();
              var result = from emp in filteredEmployees.Skip(param.iDisplayStart).Take(param.iDisplayLength)
                           select new[] { Convert.ToString(emp.EmployeeID), emp.Name, emp.Position };
  
              return Json(new
              {
                  sEcho = param.sEcho,
                  iTotalRecords = companyEmployees.Count,
                  iTotalDisplayRecords = filteredEmployees.Count,
                  aaData = result
              },
                          JsonRequestBehavior.AllowGet);
          }
  
  
      }

  Thanks for your comments. 
  
  

  Thanks for reading!
  • Marked as answer by samarmir on May 17, 2012 08:51 AM