jquery Datatables and css not rendering in mvc 4

Question

I have a simple view page, trying to render jquery datable for my view in MVC4.

My view [Admin.cshtml]

<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Practice Name</th>
                <th>Practice Address</th>
                <th>Practice Email</th>
                <th>Practice Telephone</th>
                <th>Created Date</th>
            </tr>
        </thead>
    </table>
</div>

and my reference to css and js for jquery datatables are underneath the section:

 <link type="text/css" href="//cdn.datatables.net/1.10.9/css/jQuery.dataTables.min.css" rel="stylesheet"/> 
@section Scripts{
 <script type="text/javascript" src="//cdn.datatables.net/1.10.9/js/jQuery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').dataTable({
                "ajax": {
                    "url": "/Home/Admin",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Practice_Name", "autowidth": true },
                    { "data": "Practice_Address", "autowidth": true },
                    { "data": "Practice_Email", "autowidth": true },
                    { "data": "Practice_Telephone", "autowidth": true },
                    { "data": "Created_Date", "autowidth": true }
                ]
            });
        });
    </script>
 }

and in my Controller, i have a simple GET section:

       public ActionResult Admin()
        {
            var data = db.Practices.ToList();
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }

But, when i run this application, i am getting my resultset like this

Where am i going wrong ?

Try using just the array of objects. You are sending an object which has the property data whose value is the array. — nurdyguy
– nurdyguy, Commented Jun 14, 2019 at 18:59
there's no issue in getting my data, as you see in the resultset, it's just the way it's getting rendered in my view, which, its not picking the jquery datatable and css.. — Ron
– Ron, Commented Jun 14, 2019 at 19:04
From the image it looks like it is spitting out the entire json as a single entry in the grid rather than populating the various grid boxes individually. — nurdyguy
– nurdyguy, Commented Jun 14, 2019 at 19:07

Florin-Constantin Ciubotariu · Accepted Answer · 2019-06-14 20:03:45Z

2

Change your controller method name:

public ActionResult Admin() to public ActionResult GetAdminData()

Create another action method:

[Authorize] public ActionResult Admin () => View();

Modify your JavaScript code:

"url": "/Home/Admin" to "url": "/Home/GetAdminData"

And update CDN links because they are too old:

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Why is all of this needed?

When you navigate to /Home/Admin your return View (the Admin.cshtml)
Your view contains some custom JavaScript logic which will try to fetch a list of items from the database (your GetAdminData method)
GetAdminData returns JSON which can be used by DataTables in order to show your desired content on the page.

edited Jun 14, 2019 at 20:03

answered Jun 14, 2019 at 19:27

Florin-Constantin Ciubotariu

3,8374 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ron Over a year ago

this doesn't solve the issue, it's rendering the same way, and no changes..

Florin-Constantin Ciubotariu Over a year ago

Can you provide us more code? For example, Admin.cshtml code and the method which returns it.

Ron Over a year ago

Thanks @ciubotariu-florin, but all the code is posted above, my whole .cshtml and my controller..

Florin-Constantin Ciubotariu Over a year ago

The problem is not solvable at the moment because we do not have enough information about your classes and what you want to do. As far as I can see, Admin.cshtml and Javascript are never returned by any method.

Florin-Constantin Ciubotariu Over a year ago

Show us all the HomeController and all the .cshtml, not just snippets.

|

Collectives™ on Stack Overflow

jquery Datatables and css not rendering in mvc 4

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related