title: Jquery datatable not loading
body: <p>I am trying to display data fetched from a database in a jquery datatable since the amount of data is large.. My action method returns json data. when i run the application, it only displays the json data but the structure of the data table does not works..Can anyone please tell me how should i make it work?
  Please find the code below...</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>public class SupportingChannelController : Controller
  {
      // GET: SupportingChannel
      List&lt;SupportingChannel&gt; _list = null;
      SupportingChannelBL _bl = new SupportingChannelBL();
      SupportingChannelDataVM _data = new SupportingChannelDataVM();
  
      public ActionResult GetChannelData()
      {
          return View("SupportingChannel");
      }
      public JsonResult GetSupportingChannelData()
      {
          _list = _bl.channel();
  
          _data._model = _list;
          return Json(new { data = _list }, JsonRequestBehavior.AllowGet);
      }
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model MultiRequestInterface.Models.SupportingChannelDataVM
  @{
  ViewBag.Title = "SupportingChannel";
   }
  &lt;link 
  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /&gt;
  &lt;h2&gt;Supporting Channels&lt;/h2&gt;
  @using (Html.BeginForm("getComType","SupportingChannel",FormMethod.Post))
  {
  
  &lt;div&gt;
  
      &lt;style&gt;
          table,th,td{
              border: 1px solid black;
              border-collapse: collapse;
             align-content:center;
          }
      &lt;/style&gt;
      &lt;div style="border:solid;width:100%;overflow-x:auto;"&gt;
          &lt;table  id="table" align="center" style="width:100%" 
  class="display"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Communication Type&lt;/th&gt;
                      &lt;th&gt;Communication Description&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
          &lt;/table&gt;
          &lt;/div&gt;
          &lt;input type="submit" name="submit" value="submit" /&gt;
      &lt;/div&gt;
   if (TempData["testmsg"] != null)
   {
      &lt;script type="text/javascript"&gt;
     alert("@TempData["testmsg"]");
      &lt;/script&gt;
    }
  
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script 
  src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;
  
  &lt;/script&gt;
  &lt;script&gt;
  
      $(document).ready(function ()
      {
  
         $('#table').DataTable({
             "ajax": {
             "url": "@Url.Action("GetSupportingChannelData", 
   "SupportingChannel")", // action method URL
             "type": "GET",
             "datatype": "json"
             },
        columns: [
                    { data: "CommunicationType", searchable: false, title: 
  'CommunicationType' },
                    { data: "CommunicationTypeDescription", searchable: false, 
  title: 'CommunicationTypeDescription' },
  
                ],
  
            });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/G4yJ6.png" rel="nofollow noreferrer">snapshot</a></p>
  
  <p><a href="https://i.stack.imgur.com/G9chz.png" rel="nofollow noreferrer">GetchannelData</a></p>