How to show JSON data in Jquery DataTables using "Ajax source - a server-side file, with JSON formatting" RSS

• • Reply
  

  nayanancha

  Member

  158 Points

  244 Posts

  How to show JSON data in Jquery DataTables using "Ajax source - a server-side file, with JSON for...

  Aug 01, 2011 06:12 PM|LINK

  Hi....

  I have a view in which user will select the dropdown and hits the button to get the data. I need to show this data in Jquery Datatables.

  How can i get the data to show it in DataTable. This is my below sample JSON data coming from my request in Controller.

  {"Status":true,"ErrorCode":0,"TimeStamp":"\/Date(1311951697070)\/","Messages":["Total 2 user(s) returned."],
  "Data":
  [
  {"UserName":"AAA",
  "Email":"aaa@test.com"},
  {"UserName":"BBB",
  "Email":"bbb@test.com"}]}

  Here is my code for Contrioller and View:

   [HttpPost]
          public JsonResult Index(RoleViewModel role)
          {
              
              var rolecode = role.RoleCode;
              if (rolecode == "all")
                  rolecode = string.Empty;
              
              if (!ModelState.IsValid)
              {
                  return Json("Invalid");
              }
  		
              WebRequest request = WebRequest.Create("https://abc.com/useraccount/getusers.json?Rolecode="+rolecode);
              
              request.Method = "GET";
   
              //Basic Http Authentication
   
              string username = "test";
              string pwd = "CEE589B1-C438-4673-94F6-FB3E6D4634D2";
   
              string authInfo = username + ":" + pwd;
              authInfo = Convert.ToBase64String(Encoding.Default.GetBytes(authInfo));
              request.Headers["Authorization"] = "Basic " + authInfo;
           
              WebResponse response = request.GetResponse();
   
              // Get the stream containing content returned by the server.
              Stream dataStream = response.GetResponseStream();
   
              // Open the stream using a StreamReader for easy access.
              StreamReader reader = new StreamReader(dataStream);
              // Read the content.
              string responseFromServer = reader.ReadToEnd();
   
              reader.Close();
              dataStream.Close();
              response.Close();
   
              ViewBag.Response = responseFromServer;
   
              return Json(responseFromServer, JsonRequestBehavior.AllowGet);
          }
  
  View:
  
  

  @model DirectAccess.Models.RoleViewModel
  @{
      ViewBag.Title = "UserInfo";
  }
   
  @using (Html.BeginForm("Index", "UserInfo", FormMethod.Post, new { id="UserInfo"}))
  {
      @Html.ValidationSummary(true)
      <h2>
          Get User Information:</h2>
      <br />
      <br />
      <div id="Role">
          <h2>
              Select User Role</h2>
          <br />
          <label id="viewbag">@ViewBag.Response</label>
          <br />
          <br />
          @Html.LabelFor(m => m.RoleCode):
          @Html.DropDownListFor(m => m.RoleCode, new SelectList(new DirectAccess.Models.RoleViewModel().GetRoles(), "Value", "RoleCode"), "Select")
          @Html.ValidationMessageFor(m => m.RoleCode)
          <input type="submit" id="GetUserBtn" value="Get Users" />
          
          <table id="mytable">                   
          </table>
          <script type="text/javascript">
   
              $(function () {
   
                  $("#GetUserBtn").click(function (e) {
   
   
                      e.preventDefault();
   
                      var postUrl = $("#UserInfo").attr("action");
                      var roleCode = $("#RoleCode").val();
   
                      $.post(postUrl, { "roleCode": roleCode }, function (data) {
   
                          data = $.parseJSON(data);
                          console.log(data.Data);
   
                          $('#mytable').dataTable({
                              "aaData": data,
                              "aoColumns": [{ "mDataProp": "UserName" }, { "mDataProp": "Email"}]
                          });
   
   
                      });
   
                      return false;
   
                  });
   
   
              });
      </script>
      </div>
  }
  
  Thanks

• • Reply
  

  stuie

  Participant

  1483 Points

  291 Posts

  Re: How to show JSON data in Jquery DataTables using "Ajax source - a server-side file, with JSON...

  Aug 01, 2011 08:15 PM|LINK

  Hi,

  Have a look at jQuery Templates. I have found these to be great (and easy to use) when working with an JSON/jQuery - also to go one step further wiring it all up with Knockoutjs gives a lot of nice binding features and keeping everything nicely synced.

  Hope this helps,

  Stuart

  • Marked as answer by Young Yang - MSFT on Aug 08, 2011 02:42 AM