JQuery Datagrid data not displayed [Answered]RSS

• • Reply
  singhswat

  Member

  74 Points

  215 Posts

  JQuery Datagrid data not displayed

  Jun 19, 2019 05:29 PM|singhswat|LINK

  Hi

  ... Can someone please help me with JQuery datatables... 

  Problem - For some reason its not displaying data... No errors anywhere..

  @model IEnumerable<SampleDataGrid.Models.ServiceType>
  @{
      Layout = null;
  }
  <div class="container">
      <br />
      <div style="width:90%; margin:0 auto;">
          <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
              <thead>
                  <tr>
                      <th>ServiceTypeId</th>
                      <th>ServiceTypeCode</th>
                      <th>ServiceTypeDesc</th>
                      <th>CreatedDate</th>
                      <th>CreatedBy</th>
                      <th>ModifiedDate</th>
                      <th>ModifiedBy</th>
                  </tr>
              </thead>
          </table>
      </div>
  </div>
  
  @section scripts{
      <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.4.1.js"></script>
      <script language="JavaScript" type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
      <script language="JavaScript" type="text/javascript" src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
      <script type="text/javascript">
          $(document).ready(function () {
              var table = $("#example").DataTable({
                  "processing": true, // for show progress bar
                  "serverSide": true, // for process server side
                  "filter": true, // this is for disable filter (search box)
                  "orderMulti": false, // for disable multiple column at once
                  "ajax": {
                      "url": "/ServiceType/LoadData",
                      "type": "GET",
                      "datatype": "json"
                  },
                  "columnDefs":
                  [{
                      "targets": [0],
                      "visible": false,
                      "searchable": false
                  }
                  ],
                  "columns": [
                      { "data": "ServiceTypeId", "name": "ServiceTypeId", "autoWidth": true },
                      { "data": "ServiceTypeCode", "name": "ServiceTypeCode", "autoWidth": true },
                      { "data": "ServiceTypeDesc", "name": "ServiceTypeDesc", "autoWidth": true },
                      { "data": "CreatedDate", "name": "CreatedDate", "autoWidth": true },
                      { "data": "CreatedBy", "name": "CreatedBy", "autoWidth": true },
                      { "data": "ModifiedDate", "name": "ModifiedDate", "autoWidth": true },
                      { "data": "ModifiedBy", "name": "ModifiedBy", "autoWidth": true },
                      {
                          "render": function (data, type, full, meta)
                          { return '<a class="btn btn-info" href="/DemoGrid/Edit/' + full.CustomerID + '">Edit</a>'; }
                      },
                      {
                          data: null, render: function (data, type, row) {
                              return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.CustomerID + "'); >Delete</a>";
                          }
                      },
                  ]
  
              });
          });
  
  
          function DeleteData(CustomerID) {
              if (confirm("Are you sure you want to delete ...?")) {
                  Delete(CustomerID);
              }
              else {
                  return false;
              }
          }
  
  
          function Delete(CustomerID) {
              var url = '@Url.Content("~/")' + "DemoGrid/Delete";
  
              $.post(url, { ID: CustomerID }, function (data) {
                  if (data) {
                      oTable = $('#example').DataTable();
                      oTable.draw();
                  }
                  else {
                      alert("Something Went Wrong!");
                  }
              });
          }
  
      </script>
  }
  
  

  ControllerCode

  using System;
  using System.Collections.Generic;
  using System.Data;
  using System.Data.Entity;
  using System.Linq;
  using System.Net;
  using System.Web;
  using System.Web.Mvc;
  using SampleDataGrid.Models;
  
  using Microsoft.AspNetCore;
  
  namespace SampleDataGrid.Controllers
  {
      public class ServiceTypesController : Controller
      {
          private mdl db = new mdl();
  
          // GET: ServiceTypes
          public ActionResult Index()
          {
              return View(db.ServiceTypes.ToList());
          }
  
          public ActionResult LoadData()
          {
              try
              {
                  var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
                  // Skiping number of Rows count
                  var start = Request.Form["start"].FirstOrDefault();
                  // Paging Length 10,20
                  var length = Request.Form["length"].FirstOrDefault();
                  // Sort Column Name
                  var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
                  // Sort Column Direction ( asc ,desc)
                  var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
                  // Search Value from (Search box)
                  var searchValue = Request.Form["search[value]"].FirstOrDefault();
  
                  //Paging Size (10,20,50,100)
                  int pageSize = length != null ? Convert.ToInt32(length) : 0;
                  int skip = start != null ? Convert.ToInt32(start) : 0;
                  int recordsTotal = 0;
  
                  // Getting all Customer data
                  var customerData = (from tempcustomer in db.ServiceTypes
                                      select tempcustomer);
  
                  ////Sorting
                  //if (!(string.IsNullOrEmpty(sortColumn.ToString()) && string.IsNullOrEmpty(sortColumnDirection.ToString())))
                  //{
                  //    customerData = customerData.OrderBy(sortColumn.ToString() + " " + sortColumnDirection.ToString());
                  //}
                  //Search
                  if (!string.IsNullOrEmpty(searchValue.ToString()))
                  {
                      customerData = customerData.Where(m => m.ServiceTypeCode == searchValue.ToString() || m.ServiceTypeDesc.ToString() == searchValue.ToString() || m.ServiceTypeId == searchValue);
                  }
  
                  //total number of rows count 
                  recordsTotal = customerData.Count();
                  //Paging 
                  var data = customerData.Skip(skip).Take(pageSize).ToList();
                  //Returning Json Data
                  return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
  
              }
              catch (Exception)
              {
                  throw;
              }
  
          }

• • Reply
  mgebhard

  All-Star

  43701 Points

  18703 Posts

  Re: JQuery Datagrid data not displayed

  Jun 19, 2019 05:35 PM|mgebhard|LINK

  There are several potential issue with the code shown.  Please take a few moments to debug your code using the Visual Studio debugger and the browser's dev tools (F12).

  For example, the LoadData action is looking for POST parameters (form) but the AJAX is submitting an HTTP GET.

• • Reply
  Yongqing Yu

  Contributor

  2760 Points

  784 Posts

  Re: JQuery Datagrid data not displayed

  Jun 20, 2019 04:32 AM|Yongqing Yu|LINK

  Hi singhswat,

  According to the code you provided, there are some details that need to be modified.

  singhswat

  @{ Layout = null; }

  First,I find that your view does not refer to the _Layout.cshtml as shown above, but the JS of your page and the links to the referenced files are in @section scripts{}.

  A section allows you to add something in a view which will be added in the layout,so it's not necessary to use @section scripts {} on your current page, and that's why no JS event was triggered.

  singhswat

  <script language="JavaScript" type="text/javascript" src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>

  Secondly,to reference css file, you need to use link tag instead of script tag like this:

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

  singhswat

  "ajax": {
                      "url": "/ServiceType/LoadData",
                      "type": "GET",
                      "datatype": "json"
                  },

  Thirdly,I find that the url in your ajax is "/ServiceType/LoadData",however,according to the code you provided,your controller name is: 

  singhswat

    public class ServiceTypesController : Controller

  So, you need to change the url to "/ServiceTypes/LoadData".

  In summary, after you modify the code, I suggest you use breakpoints and F12 to debug your code, which will help you solve your issue easierly.

  Best Regards,

  YongQing.

  MSDN Community Support
  
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.