Paginación con casillas de verificación seleccionadas. Las casillas de verificación solo funcionarán en la página de paginación actual. tablas de datos jQuery

Estoy usando el complemento jquery datatables.

Solo tengo un diseño de tabla html directo para ello.

<table  class="display" id="contactsTable">  
    <thead> 
        <tr>  
            <th>Id</th> 
            <th>Email</th> 
            <th>Name</th> 
            <th>Phone</th>  
            <th>City</th>    
            <th>State</th>    
            <th>Arrival</th>  
            <th>Departure</th> 
            <th>Inserted</th> 
            <th>Check</th> 
        </tr> 
    </thead> 
    <tbody>    
                    <tr>             
            <td>301</td> 
            <td>email address</td>    
            <td>Test</td> 
            <td></td> 
            <td></td> 
            <td></td> 
            <td>July 14 2011</td> 
            <td>July 23 2011</td> 
            <td>April 12 2011 07:05</td> 
            <td><input type="checkbox" name="selected[]" value="301" class="chkbox"/></td> 
        </tr> 
                    <tr>             
            <td>300</td> 
            <td>email</td>    
            <td>Test</td>  
<td></td> 
            <td></td> 
            <td></td>               
            <td>September 02 2011</td> 
            <td>September 10 2011</td> 
            <td>April 11 2011 12:01</td> 
            <td><input type="checkbox" name="selected[]" value="300" class="chkbox"/></td> 
        </tr> 

Aquí está mi código para enviar (solo temporal).

<input id="submitButton" type="submit" value="Submit" onclick="test()" />

Y mi javascript para asignar las casillas de verificación a una matriz.

function test() {
        var values = $('input:checkbox:checked.chkbox').map(function () {
            return this.value;
        }).get();
        console.log(values);
    }

Aquí está el código de las tablas de datos

 $(document).ready(function() {  

    var selected;
    var selectedOutput = '#selectedOutput';
    var template = 'selectedTemplate';
    var submitButton = '#submitButton'

    var  dTable = $('#contactsTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "aoColumns": [
            {"bVisible": false }, //keep the id invisble    
            null,
            null,     
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]
    });     

El problema es que no puedo seleccionar una casilla de verificación en una página. La mesa tiene varias páginas. Si hago clic en enviar, solo envía la matriz de casillas de verificación para la página actual en la que estoy.

Espero que esto quede lo suficientemente claro. No estoy seguro de lo que está pasando. Gracias por cualquier ayuda.

preguntado el 16 de mayo de 11 a las 16:05

3 Respuestas

Creo que podrías echarle un vistazo este, podría resolver su problema.

Este ejemplo podría serle de ayuda, ya que parece ser exactamente su caso (este usa fnGetNodes (), mientras que en el otro enlace se explica cómo usar fnGetHiddenNodes () si la primera función no funciona): http://datatables.net/examples/api/form.html

Respondido el 19 de Septiembre de 17 a las 20:09

Muchas gracias. Extrañé totalmente ese ejemplo. - Dibujó H

Hola, ¿cómo puedo iterar? var sData = $('input', oTable.fnGetNodes()).serialize(); devuelve una cadena como tuxi = tuxi1 & tuxia = tuxi2 - merveotesi

enlace primero dando 404 Página no encontrada. - Lavekush Agrawal

Todavía obtengo la página no encontrada, ¿alguien puede tener un nuevo enlace? Akash Ujjwal

CAUSAS

jQuery DataTables elimina las filas no visibles del DOM por razones de rendimiento, es por eso que cuando envía el formulario, solo se envían las casillas de verificación visibles.

SOLUCIÓN

Es posible que deba convertir esos <input type="checkbox"> que están marcados y no existen en DOM en <input type="hidden"> al enviar el formulario.

Por ejemplo, para enviar un formulario con los valores de todas las casillas de verificación:

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

$("form").on('submit', function(e){
   var $form = $(this);

   // Iterate over all checkboxes in the table
   table.$('input[type="checkbox"]').each(function(){
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
         if(this.checked){
            // Create a hidden element 
            $form.append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      } 
   });          
});

Si envía el formulario a través de Ajax, es aún más sencillo.

Por ejemplo, para enviar un formulario a través de Ajax con los valores de todas las casillas de verificación:

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

$("#btn-submit").on('click', function(e){
   e.preventDefault();

   $.ajax({
      url: "/path/to/your/script.php",
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log("Response", data);
   });
});

DEMO

Vea jQuery DataTables: cómo enviar todos los datos del formulario de páginas para obtener más información y demostración.

Respondido el 24 de enero de 18 a las 09:01

var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = CHECK_BOXES_COUNT_OR_ROW_COUNT;
oTable.fnDraw();

Esto debería resolver el problema por ti

Respondido 19 Jul 13, 19:07

Esto parece detener la carga de los datos en mi tabla. - Daniel Jackson

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.