Load Datatable with Jquery and MVC 5

Question

Good morning!,

I read some articles about Datatables.net, for example:

Datatables.net - Examples index

Load tables with json using Datatables

Using jquery Datatables with ASP.net MVC 5

but I cannot upload the data to the view:

Class Clientex

public class ClienteX
{
    public int ID { get; set; }
    public string Nome { get; set; }
    public int Idade { get; set; }
}

ACTION

public ActionResult Index()
    {
        return View();
    }

    public JsonResult AjaxHandler()
    {
        var model = new List<ClienteX>(){
            new ClienteX{ID=1, Nome="João", Idade=42}
        };

        var Resultado = new
        {
            sEcho = "1",
            iTotalRecords = 1,
            iTotalDisplayRecords = 1,
            aaData = model
        };
        return Json(Resultado, JsonRequestBehavior.AllowGet);
    }

VIEW index.cshtml

<h2>DataTable - Ajax</h2>
<button type="button" id="btnEnviar">Enviar</button>
<table id="myDataTable" class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(document).ready(function () {

        $("#btnEnviar").click(function () {
            
                $("#myDataTable").dataTable({
                    "bServerSide": true,
                    "sAjaxSource": "DOMDataSource/AjaxHandler",
                    "bProcessing": true,
                    "aoColumns":
                        [
                            {
                                "sName": "ID",
                                "mData": "ID"
                            },
                            {
                                "sName": "Nome",
                                "mData": "Nome"
                            },
                            {
                                "sName": "Idade",
                                "mData": "Idade"
                            }
                        ]
                });
        });
    });
</script>

The Submit button click event works:

$("#btnEnviar").click(function () {...

but the next code that calls the Jsonresult method and should popular the table is not executed, why ?

$("#btnEnviar").click(function () {

            $("#myDataTable").dataTable({
                "bServerSide": true,
                "sAjaxSource": "DOMDataSource/AjaxHandler",
                "bProcessing": true,
                "aoColumns":
                    [
                        {
                            "sName": "ID",
                            "mData": "ID"
                        },
                        {
                            "sName": "Nome",
                            "mData": "Nome"
                        },
                        {
                            "sName": "Idade",
                            "mData": "Idade"
                        }
                    ]
            });
    });

Screen with Send button

Answer 1

Adriano, I used your codes as an example and it worked, I don’t know how is your project structure. if you used the default VS template, then you are probably referencing the jquery file twice.

Second problem, as Voce added the javascript codes and extra references within the view html, if you notice the source code after rendering in the browser will notice that they stood above the native reference of the JS Templete jquery.

So I recommend using your javascript codes like this:

@section scripts
{
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <script type="text/javascript">
    $(function() {
        $(document).ready(function () {

            $("#btnEnviar").click(function () {

                $("#myDataTable").dataTable({
                    "bServerSide": true,
                    "sAjaxSource": "/Home/AjaxHandler",
                    "bProcessing": true,
                    "aoColumns":
                        [
                            {
                                "sName": "ID",
                                "mData": "ID"
                            },
                            {
                                "sName": "Nome",
                                "mData": "Nome"
                            },
                            {
                                "sName": "Idade",
                                "mData": "Idade"
                            }
                        ]
                });
            });
        });
    });
</script>

}

ds