0

He mirado ya todas las preguntas y respuestas sobre estos temas pero no hay ninguna que me solucione el problema. Lo que necesito es recorrer un datatable y mostrar los valores de una columna. He probado todas las funciones que hay por aquí y con la documentación del datatable y todas me hacen lo mismo, me muestran los valores pero de las filas que se ven, es decir, las de la página actual, no las que están ocultas (ya que el datatable tiene paginación).

Ahora estaba probando esta funcion pero hace exactamente lo mismo:

var arrayIds = new Array();
var contador = 0;
var ids;
$("#tablaDatos tr").each(function(index){
    $(this).children("td").each(function(index2){
        switch(index2){
            case 0:
                ids = $(this).text();
                alert(ids);
                break;
        }
    });
});

Con esta función solo me muestra los valores de las filas que se ven.

<table id="tablaDatos" class="table table-striped table-bordered dt-responsive" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th data-priority="1">Id.Pieza</th>
                    <th>*</th>
                    <th>Num.Serie</th>
                    <th>Cod. Art.</th>
                    <th>Descripcion</th>
                    <th>Almacén</th>
                    <th>Estado Pieza</th>
                    <th>Proyecto</th>
                    <th>Proveedor</th>
                    <th>Observaciones</th>
                    <th data-priority="2">Acción</th>
                </tr>
            </thead>
            <tbody id="tbody_grid"></tbody>
        </table>

Saludos.

2
  • Es que, quizá, las filas que no se ven no estén cargadas en la página. ¿Lo has verificado? Commented el 16 ene. 2018 a las 8:41
  • Sí, si que está verificado y las filas que no se ven si que están cargadas.
    – Marcos
    Commented el 16 ene. 2018 a las 10:15

1 respuesta 1

2

DataTable tiene unos métodos para capturar los rows de la tabla generada aun estando estos ocultos, y son rows() y every().

https://datatables.net/reference/api/rows().every()

Si vieramos el data, toma todos los elementos de esa fila de la tabla ya que siempre tendrán posición horizontal y no vertical, por tanto hay que añadir al array que queramos o el uso que le demos, la posición que ocupa en la columna.

Si queda alguna duda, comenta.

let table = $('#dataTable').DataTable();
//Declaramos 2 arrays de ejemplo que tomarán los elementos que tenga la 1º y 3º columna
    let arrayCol1 = [],
        arrayCol3 = [];

// Con row().every() capturamos todos los rows estén o no ocultos
    table.rows().every(function (rowIdx, tableLoop, rowLoop) {
        var data = this.data();
        arrayCol1.push(data[0]);   
        arrayCol3.push(data[2]); 
    });
//Imprimimos el resultado
    for (let i = 0; i < arrayCol1.length; i++) {
        if (i === 0) {
            document.getElementById('htmlPrint').innerHTML += '<strong>La columna Rendering Engine tiene:</strong> ';
        }
        document.getElementById('htmlPrint').innerHTML += arrayCol1[i] + ', ';
    }

    for (let i = 0; i < arrayCol3.length; i++) {
        if (i === 0) {
            document.getElementById('htmlPrint').innerHTML += '<br /> <br /><strong>La columna Platform tiene:</strong> ';
        }
        document.getElementById('htmlPrint').innerHTML += arrayCol3[i] + '|, |';
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<div class="container">

        <div class="container">

    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="dataTable">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Trident</td>
                <td>
                    Internet
                    Explorer 4.0
                </td>
                <td>Win 95+</td>
                <td> 4</td>
                <td>X</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>
                    Internet
                    Explorer 5.0
                </td>
                <td>Win 95+</td>
                <td>5</td>
                <td>C</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>
                    Internet
                    Explorer 5.5
                </td>
                <td>Win 95+</td>
                <td>5.5</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>
                    Internet
                    Explorer 6
                </td>
                <td>Win 98+</td>
                <td>6</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 7</td>
                <td>Win XP SP2+</td>
                <td>7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>AOL browser (AOL desktop)</td>
                <td>Win XP</td>
                <td>6</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Firefox 1.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Firefox 1.5</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Firefox 2.0</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Firefox 3.0</td>
                <td>Win 2k+ / OSX.3+</td>
                <td>1.9</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Camino 1.0</td>
                <td>OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Camino 1.5</td>
                <td>OSX.3+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Netscape 7.2</td>
                <td>Win 95+ / Mac OS 8.6-9.2</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Netscape Browser 8</td>
                <td>Win 98SE+</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Netscape Navigator 9</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.0</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.1</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.1</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.2</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.2</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.3</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.3</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.4</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.4</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.5</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.5</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.6</td>
                <td>Win 95+ / OSX.1+</td>
                <td>1.6</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.7</td>
                <td>Win 98+ / OSX.1+</td>
                <td>1.7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Mozilla 1.8</td>
                <td>Win 98+ / OSX.1+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Seamonkey 1.1</td>
                <td>Win 98+ / OSX.2+</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Epiphany 2.20</td>
                <td>Gnome</td>
                <td>1.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Webkit</td>
                <td>Safari 1.2</td>
                <td>OSX.3</td>
                <td>125.5</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Webkit</td>
                <td>Safari 1.3</td>
                <td>OSX.3</td>
                <td>312.8</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Webkit</td>
                <td>Safari 2.0</td>
                <td>OSX.4+</td>
                <td>419.3</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Webkit</td>
                <td>Safari 3.0</td>
                <td>OSX.4+</td>
                <td>522.1</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Webkit</td>
                <td>OmniWeb 5.5</td>
                <td>OSX.4+</td>
                <td>420</td>
                <td>A</td>
            </tr>
        </tbody>
    </table>

</div>
<div id="htmlPrint" style="width: 100%; height: auto; margin-top: 36px;"></div>

2
  • 1
    Muchas gracias por su aportación, pero no funciona. El .data() siempre me muestra undefined. Con un datatable llenado con datos manualmente funciona ok, pero en mi caso llenamos los datos por ajax, y de esta forma no funciona, lo comprobé.
    – Marcos
    Commented el 16 ene. 2018 a las 10:18
  • Entiendo lo que quieres decir. Si quieres podrías pegar un poco más de código para ver si puedo adaptarlo.
    – Qadesh
    Commented el 16 ene. 2018 a las 10:32

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.