How to delete a row from a datatable

Question

How to delete a row from a datatable

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

my question is, how can I do to delete the first row of a datatable by means of a button (outside the table) I got to see examples on the datatable page but it does not work for me. Thank you

    <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>

jquery datatables

asked by Dennis Fernández 20.04.2018 в 19:50

source

2 answers

How to add a converter (GSON) to retrofit in netbeans for javaFX project? Xamarin studio IOS automatic provisioning

score 1 · Answer 1

Using the API of datatables you can do it in the following way:

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

The benefit of using it like this is that you rearm the table, for example it is important if you are paged.

EDIT

Only to the example method add another button to differentiate how to delete the first row of the table, how to delete the first row of the current page, as a result of this the topic of the "reassembly" of the table becomes better in each remove() and the advantages of using the api if one has paged.

I'll give you an example:

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>

score 0 · Answer 2

0

You can delete the first row of the tbody without using the DataTable plugin like this:

function borrar () {

        var myTable = $('#example');

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

answered by 20.04.2018 в 19:52