CODEWITHSUNDEEP
asp.net-mvcjquery-uidatatablesdatatables-1.10
I Love Stackoverflow
I Love Stackoverflow

Reputation: 6868

DataTable not rendering based on JSON data received from AJAX call

I want to load a data from the table into jQuery DataTable. For this I've applied below code:

HTML

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
</head>
<body>
    <div style="width:90%;margin:0 auto">
        <table id="mydatatable">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Id</th>
                <th>City</th>
                <th>Country</th>
            </tr>
        </table>
    </div>
    <script src="~/scripts/jquery-3.2.1.min.js"></script>
    <script src="~/scripts/jquery.validate.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="~/scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $document.ready(function () {
            var oTable = $("mydatatable").DataTable({
                "ajax": {
                    url: "/Home/GetEmployees",
                    type: "get",
                    database: "json"
                },
                "columns": [
                    { "data": "FirstName", "autowidth": true },
                    { "data": "LastName", "autowidth": true },
                    { "data": "EmailId", "autowidth": true },
                    { "data": "City", "autowidth": true },
                    { "data": "Country", "autowidth": true }
                ]
            });
        });
    </script>
</body>
</html>

Controller

using MVC_CRUD.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace MVC_CRUD.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetEmployees() {
            using (MvcCRUDDBEntities dc = new MvcCRUDDBEntities()) {
                var employees = dc.Employees.OrderBy(a => a.FirstName).ToList();
                return Json(new { data = employees }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

Data which I'm receiving in "//Home/GetEmployees" is :

{"data":[{"EmployeeId":4,"FirstName":"Ankit","LastName":"Agarwal","EmailId":"[email protected]","City":"Pune ","Country":"India     "},{"EmployeeId":2,"FirstName":"Niraj","LastName":"Desai","EmailId":"[email protected]","City":"Bilimora ","Country":"India     "},{"EmployeeId":1,"FirstName":"Pratik","LastName":"Soni","EmailId":"[email protected]","City":"Valsad ","Country":"India     "},{"EmployeeId":3,"FirstName":"Shezad","LastName":"Khan","EmailId":"[email protected]","City":"Manglore ","Country":"India     "}]}

But when I run the application, DataTable is not having any data: Screenshot

What I want here is data should be loaded in the DataTable on the start of the application. I tried some existing solutions available on StackOverflow but none of them helped me.

Update: While debugging I found that in HomeController.cs file "GetEmployees" method is not event getting called.

Upvotes: 2

Views: 2479

Answers (2)

Ali Soltani
Ali Soltani

Reputation: 9927

You need edit code below:

var oTable = $("mydatatable").DataTable

to

var oTable = $("#mydatatable").DataTable

because you have table with id="mydatatable". For getting this element by id in jQuery you need use # before of id.

Update

Client side

You need add below option to get data from server:

oTable = $('#mydatatable').dataTable({  
       "bServerSide": true, 
        ...
    });

Server side

return Json(new {
 data = employees.Select(e => new {
  FirstName = e.FirstName,
   LastName = e.LastName,
   StatusLU = e.StatusLU,
   EmailId = e.EmailId,
   City = e.City,
   Country = e.Country
 })
}, JsonRequestBehavior.AllowGet);

Upvotes: 1

Saurin
Saurin

Reputation: 1830

Try this once :

var draw = Request.Form.GetValues("draw").FirstOrDefault();

return Json(new 
       { draw = draw, 
         recordsFiltered = recordsTotal, 
         recordsTotal = recordsTotal,  //1000
         data = employees 
      }, JsonRequestBehavior.AllowGet);

Update : I found you have used database in properties, that seems wrong.

var oTable = $("#mydatatable").DataTable({

                "processing": true,  //update
                "serverSide": true, //update

                "ajax": {
                    url: "/Home/GetEmployees",
                    type: "get",
                    datatype: "json" //review this
                },
                "columns": [
                    { "data": "FirstName", "name": "FirstName", "autowidth": true },
                    { "data": "LastName", "name": "LastName",  "autowidth": true },
                    { "data": "EmailId", "name": "EmailId",  "autowidth": true },
                    { "data": "City", "name": "City",  "autowidth": true },
                    { "data": "Country", "name": "Country",  "autowidth": true }
                ]
            });

Upvotes: 0

Related Questions