1

Quisiera agregar los filtro que ofrece jquery a mi tabla, cabe decir que mi tabla ya se llena con datos reales que se reciben del controlador Empleado en la function reporte, esta me regresa una lista y es la misma que recorro para poner los datos en la filas, esto funciona sin ningun problema, el problema es que he visto que con solo las siguientes lineas ya se ponen los filtros, pero en mi caso si ya cargo los datos en que lugar o como deberia poner esas lineas

$(document).ready( function () {
    $('#myTable').DataTable();
} );

function Empleado() {

    $.ajax({
        type: "POST",
        url: '/Empleado/reporte?id=' + id,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    })
        .done(function (lista) {
                $('#table').append(//recorremos la lista llenando la tabla
                    '<tr>' +
                    '<td align="center">' + lista[0] + '</td>' +
                    '<td align="center">' + lista[1] + '</td>' +
                    '<td align="center">' + lista[2] + '</td>' +
                    '<td align="center">' + lista[3] + '</td>' +
                    '</tr>'
                );

            }
    });
}
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>   
</head>
<body>
<table id="example" class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th style="width:100px;">column1</th>
<th style="width:100px;">column2</th>
<th style="width:100px;">column3</th>
<th style="width:100px;">column4</th>
</tr>
</thead>
<tbody id="table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

2
  • Recuerda que los scrips siempre van antes de terminar el body Commented el 28 abr. 2021 a las 21:33
  • Ya los movi de lugar, y si aparece mi tabla con mi datos, pero en el js como añado esa parte de .DataTable a mi codigo para que ya me salgan los filtros?
    – cosito
    Commented el 28 abr. 2021 a las 21:39

2 respuestas 2

1

Despues de crear tu tabla usando el append, tienes que inicializarlo con lo que pusistes:

.done(function (lista) {
    $('#table').append(//recorremos la lista llenando la tabla
        '<tr>' +
        '<td align="center">' + lista[0] + '</td>' +
        '<td align="center">' + lista[1] + '</td>' +
        '<td align="center">' + lista[2] + '</td>' +
        '<td align="center">' + lista[3] + '</td>' +
        '</tr>'
    );
    $('#example').Datatable();
}

$(document).ready(function() {
  $('#table').append( //recorremos la lista llenando la tabla
    '<tr>' +
    '<td align="center">Dato1</td>' +
    '<td align="center">Dato2</td>' +
    '<td align="center">Dato3</td>' +
    '<td align="center">Dato4</td>' +
    '</tr>' +
    '<tr>' +
    '<td align="center">Dato5</td>' +
    '<td align="center">Dato6</td>' +
    '<td align="center">Dato7</td>' +
    '<td align="center">Dato8</td>' +
    '</tr>'
  );
  $('#example').DataTable();
});
<html>

<head>
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
</head>

<body>
  <table id="example" class="table table-striped table-bordered table-responsive">
    <thead>
      <tr>
        <th style="width:100px;">column1</th>
        <th style="width:100px;">column2</th>
        <th style="width:100px;">column3</th>
        <th style="width:100px;">column4</th>
      </tr>
    </thead>
    <tbody id="table"></tbody>
  </table>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
</body>

</html>

Aunque lo anterior te funcionaria correctamente, lo ideal es que uses row.add para agregar datos a tu Datatable, en vez del append, asi:

.done(function (lista) {
    var table = $('#example').Datatable();
    table.row.add( [
        lista[0],
        lista[1],
        lista[2],
        lista[3]
    ] ).draw( false );
}
3
  • No entiendo ya hice lo que me comentaron, ya puse los links correctos, pero en mi js me sigue marcando en $('#example').DataTable(); el siguiente error Uncaught TypeError: $(...).Datatable is not a function , cabe mencionar que en mi archivo js cuando inicio a escribir .Data no me aparece la palabra completa en opciones
    – cosito
    Commented el 28 abr. 2021 a las 22:24
  • @Madre la funcion "Empleado" lo tienes en un archivo aparte? Si es asi...estas importando primero el script del dataable y despues tu script? Commented el 28 abr. 2021 a las 22:28
  • Si esta en un archivo aparte en mi html esta como <script src="~/Js/Empleado.js"></script> y aqui busca la funcion Empleado
    – cosito
    Commented el 28 abr. 2021 a las 22:48
0

En la función Empleado no se están cerrando correctamente las llaves, es lo primero que se debe solucionar. Una vez corregido, bastaría con agregar la inicialización de DataTables posterior a la creación de la tabla. Con esto ya tendrás un input filtro que actuará en toda la tabla.

function Empleado() {
    $.ajax({
        type: "POST",
        url: '/Empleado/reporte?id=' + id,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    })
    .done(function (lista) {
        $('#table').append(//recorremos la lista llenando la tabla
            '<tr>' +
            '<td align="center">' + lista[0] + '</td>' +
            '<td align="center">' + lista[1] + '</td>' +
            '<td align="center">' + lista[2] + '</td>' +
            '<td align="center">' + lista[3] + '</td>' +
            '</tr>'
        );
        $('#table').DataTable();
    });
}

Si lo que requieres son filtros por cada columna, deberías agregar lo siguiente antes de la inicialización de DataTables, en general lo que hace es clonar el la cabera de la tabla para después generar inputs que servirán como filtros


    $('#table thead tr').clone(true).appendTo( '#table thead' );
    $('#table thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 

Si bien esto debería funcionar, te recomiendo que si ya estás cargando este plug-in lo utilices de una de las maneras en las que se indica la documentación, por ejemplo:

Creas la petición AJAX en el cuerpo del objeto DataTable y las columnas las manejas como objetos que retornarán de tu controlador:

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'hr.position' },
        { data: 'hr.salary' },
        { data: 'hr.state_date' },
        { data: 'contact.office' },
        { data: 'contact.extn' }
    ]
} );

Este es el objeto esperado de la respuesta

{
    "name": "Tiger Nixon",
    "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
    },
    "contact": {
        "office": "Edinburgh",
        "extn": "5421"
    }
}

Esto te permite agrupar más datos, así como también a simple vista en el objeto DataTable puedes identificar las columnas más fácilmente para cuando requieras editar. Adicional agrego los enlaces dque deberías utilizar, uno css y otro datatable, procura colocar el js justo antes de terminar la etiqueta body:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.