4

Bom dia!,

Li alguns artigos sobre o DataTables.net, por exemplo:

DataTables.net - Exemples index

Carregar tabelas com json usando DataTables

Usando jquery DataTables com o ASP.net MVC 5

porém não consigo fazer carregar os dados na 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>

O evento click do botão Enviar funciona:

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

mas o código seguinte que chama o método JsonResult e que deveria popular a tabela não é executado, por quê ?

$("#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"
                        }
                    ]
            });
    });

Tela com o botão Enviar inserir a descrição da imagem aqui

3
  • amigo, se você coloca um BreakPoint na sua action a requisição está chegando ?
    – Brunno
    Commented 13/09/2015 às 15:54
  • Outro detalhe é observar no console do navegador se a requisição está retornando todos os dados certinhos.
    – Ivan Teles
    Commented 13/09/2015 às 16:04
  • Olá Bruno obrigado pela observação, a sugestão do Ivan Teles resolvei meu problema e só para completar, sim coloquei um breakPoint na action e não estava chegando.
    – hard123
    Commented 13/09/2015 às 18:11

1 Resposta 1

3

Adriano, usei seus códigos como exemplo e funcionou, não sei como está sua estrutura do projeto. se você utilizou o template padrão do VS, então provavelmente você está referenciando duas vezes o arquivo do jquery.

Segundo problema, como voce adicionou os códigos javascript e referencias extras dentro do html da view, se você reparar no código fonte apos renderização no navegador vai reparar que eles ficaram acima da referencia nativa do jquery do templete do JS.

Então recomendo usar seus códigos javascript assim:

@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

1
  • Obrigado Ivan Teles! sua sugestão está correta, agora funciona.
    – hard123
    Commented 13/09/2015 às 18:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .