1

mi pregunta es, como puedo hacer para eliminar la primera fila de un datatable por medio de un botón (fuera de la tabla) me metí a ver ejemplos en la pagina de datatable pero no me funciona. Muchas gracias

    <script>
        function borrar () {

            var myTable = $('#example').DataTable();

            myTable.row( ':eq(0)' ).delete( {
                title: 'Delete first row'
            } );
        }


    </script>
</head>
<body>
    <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>

    </tfoot>
</table>
    <button id="aiuda" onclick="borrar()" class="Eliminar">Eliminar primera fila</button>
</body>

2 respuestas 2

1

Puedes borrar la primera fila del tbody sin utilizar el plugin de DataTable asi:

function borrar () {

        var myTable = $('#example');

        myTable.find( 'tbody tr:eq(0)' ).remove();
    }
1

Utilizando la api de datatables podes hacerlo de la siguiente manera:

myTable.row(':eq(0)').remove().draw();

El beneficio de usarlo así es que rearma la tabla, por ejemplo es importante si tenes paginado.

EDIT

Solo a método de ejemplo agregue otro botón para diferenciar como borrar la primerísima fila de la tabla, de como borrar la primera fila de la pagina actual, a raiz de esto se evidencia mejor el tema del "rearmado" de la tabla nuevamente en cada remove() y las ventajas de utilizar la api si uno tiene paginado.

Te dejo un ejemplo:

var myTable = $('#example').DataTable({
  "pageLength": 2
});
    
function borrarPrimeraDeTabla () {
  myTable.row(':eq(0)').remove().draw();
}

function borrarPrimeraDePaginaActual () {
  myTable.row(':eq(0)', { page: 'current' }).remove().draw();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<body>
    <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
         <tr>
            <td>juan Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
         <tr>
            <td>pedro Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
         <tr>
            <td>carlos Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
         <tr>
            <td>micho Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
    <button id="aiuda" onclick="borrarPrimeraDeTabla()" class="Eliminar">Eliminar primera fila de toda la tabla</button>
        <button id="aiuda" onclick="borrarPrimeraDePaginaActual()" class="Eliminar">Eliminar primera fila de pagina actual</button>

</body>

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.