¿Como seleccionar varias filas en Data Table jQuery y obtener un dato de cada fila seleccionada?

publicado por: Anonymous

Como se puede seleccionar varias filas de un Data Table jQuery, y obtener los datos de la primera columna de cada fila seleccionada????

solución

Te dejo un ejemplo que viene en la pagina de Datatables.net

_x000D_

_x000D_

$(document).ready(function() {_x000D_
    var table = $('#example').DataTable();_x000D_
    var dato = "";_x000D_
    _x000D_
    //para seleccionar una opcion_x000D_
    $('#example tbody').on( 'click', 'tr', function () {_x000D_
        if ( $(this).hasClass('selected') ) {_x000D_
            $(this).removeClass('selected');_x000D_
            dato = "";_x000D_
            console.log(dato);_x000D_
        }_x000D_
        else {_x000D_
            table.$('tr.selected').removeClass('selected');_x000D_
            $(this).addClass('selected');_x000D_
            dato = $(this).find("td:eq(0)").text();_x000D_
            console.log(dato);_x000D_
        }_x000D_
    } );_x000D_
} );

_x000D_

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>_x000D_
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>_x000D_
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>_x000D_
_x000D_
_x000D_
<table id="example" class="display" cellspacing="0" width="100%">_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th>Name</th>_x000D_
                <th>Position</th>_x000D_
                <th>Office</th>_x000D_
                <th>Age</th>_x000D_
                <th>Start date</th>_x000D_
                <th>Salary</th>_x000D_
            </tr>_x000D_
        </thead>_x000D_
        <tfoot>_x000D_
            <tr>_x000D_
                <th>Name</th>_x000D_
                <th>Position</th>_x000D_
                <th>Office</th>_x000D_
                <th>Age</th>_x000D_
                <th>Start date</th>_x000D_
                <th>Salary</th>_x000D_
            </tr>_x000D_
        </tfoot>_x000D_
        <tbody>_x000D_
            <tr>_x000D_
                <td>Tiger Nixon</td>_x000D_
                <td>System Architect</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>61</td>_x000D_
                <td>2011/04/25</td>_x000D_
                <td>$320,800</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Garrett Winters</td>_x000D_
                <td>Accountant</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>63</td>_x000D_
                <td>2011/07/25</td>_x000D_
                <td>$170,750</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Ashton Cox</td>_x000D_
                <td>Junior Technical Author</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>66</td>_x000D_
                <td>2009/01/12</td>_x000D_
                <td>$86,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Cedric Kelly</td>_x000D_
                <td>Senior Javascript Developer</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>22</td>_x000D_
                <td>2012/03/29</td>_x000D_
                <td>$433,060</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Airi Satou</td>_x000D_
                <td>Accountant</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>33</td>_x000D_
                <td>2008/11/28</td>_x000D_
                <td>$162,700</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Brielle Williamson</td>_x000D_
                <td>Integration Specialist</td>_x000D_
                <td>New York</td>_x000D_
                <td>61</td>_x000D_
                <td>2012/12/02</td>_x000D_
                <td>$372,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Herrod Chandler</td>_x000D_
                <td>Sales Assistant</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>59</td>_x000D_
                <td>2012/08/06</td>_x000D_
                <td>$137,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Rhona Davidson</td>_x000D_
                <td>Integration Specialist</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>55</td>_x000D_
                <td>2010/10/14</td>_x000D_
                <td>$327,900</td>_x000D_
            </tr>_x000D_
      </tbody>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Para múltiples opciones se usaría el siguiente fragmento en lugar del código de seleccionar una opción, este código lo puedes encontrar en los ejemplos de datatables.

//multiples opciones
$('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
    dato = ", " + $(this).find("td:eq(0)").text();
    console.log(dato);
} );
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *