Load DataTable with Jquery and MVC 5

Navigation
2

Good day !,

I have read some articles on DataTables.net, for example:

DataTables.net - Exemples index

Loading tables with json using DataTables

Using jquery DataTables with ASP.net MVC 5

but I can not load the data in 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 push button click event works: 

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

But the next code that calls the JsonResult method and which should populate the table does not run, 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 the Submit button

    
asked by anonymous 13.09.2015 / 17:28

1 answer

1

Adriano, I used his codes as an example and it worked, I do not know how his design structure is. if you used the default VS template, then you're probably referencing the jquery file twice.

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

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

    
13.09.2015 / 18:17
Git merge did not happen as expected Repository Pattern - Doubt of use