My controller return correct data but datatable doesnt vizualize it

I have a very strange problem for the first time when I use Datatables. My action returns JSON response with correct data to datatable but in view I don’t receive table with filled data but JSON format data. Where is the problem?

public class Proba
{
    public string Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
}

Action is
 public ActionResult UserList()
    {
        var data = context.Probas.ToList();
        return Json(new { data = data }, JsonRequestBehavior.AllowGet);
    }

View
@model IEnumerable<MSklad.Models.Proba>


<div class="col-md-12" style="margin-top: 30px;">
        <input type="button" class="btn btn-info" value="Нов потребител" onclick="location.href='@Url.Action("Register", "Account")'"  style="margin-bottom: 10px;"/>
        <table id="myTable">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Name
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

@section Scripts
{
    <script>
        $(document).ready( function () {
            $('#myTable').DataTable(
                {
                    "responsive": "true",
                    "ajax": {
                    "type" : "GET" ,
                    "url" : "@Url.Action("UserList","Account")" ,
                    "datatype" : "json"
                    },
                    "columns":
                    [
                        { "data": "Id" },
                        { "data": "Name"}
                    ],
                    "language": {
                        "processing": "<img src='https://gph.is/2gESFHh' />",
                        "emptytable": "No data found, You may click on <b> Add New </b> button"
                    }
                });
        });
    </script>
}

Response in browser
{"data":[{"Id":"1","Name":"ime","Age":1}]}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your JSON has a data attribute {“data”:[{“Id”:”1″,”Name”:”ime”,”Age”:1}]}. just add “dataSrc”: “data”

    $(document).ready(function () {
        $('#myTable').DataTable(
            {
                "responsive": "true",
                "ajax": {
                "type": "GET",
                "url": "@Url.Action("UserList","Account")" ,
                "datatype": "json",
                "dataSrc": "data"
            },
            "columns":
                [
                    { "data": "Id" },
                    { "data": "Name" }
                ],
            "language": {
                "processing": "<img src='https://gph.is/2gESFHh' />",
                "emptytable": "No data found, You may click on <b> Add New </b> button"
            }
        });
    });

In your Account Controller, create an Action method, I am naming mine Index which will take me to the View with DataTables
    public ActionResult Index()
    {
        return View();
    }

Then from your View using ajax in your DataTable you will be calling another Action Method
    public JsonResult UserList()
    {
       var data = context.Probas.ToList();
       return Json(new { data = data }, JsonRequestBehavior.AllowGet);
    }

You will have two Action methods, one will take you to your View and another one will return Json Data when called from the DataTable


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x