actualización de tablas de datos procesados por el servidor de origen con parámetros adicionales

Estoy tratando de pasar parámetros adicionales (lista de casillas de verificación seleccionados) a una mesa de tablas de datos-procesado servidor #my_table cuando un Presentar botón de entrada se ha hecho click:actualización de tablas de datos procesados por el servidor de origen con parámetros adicionales

screenshot

lo que probablemente significa que debe establecer el my_table.sAjaxSource al guión backend además una lista compilada de casillas de verificación y luego llamar my_ta ble.fnDraw()?

He preparado un caso muy simple análisis - prueba.php:

<?php 
error_log('QUERY_STRING: ' . $_SERVER['QUERY_STRING']); 
?>

y index.html:

<html> 
<head> 
<style type="text/css" title="currentStyle"> 
     @import "/css/demo_table_jui.css"; 
     @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css"; 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>; 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>; 
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     my_table = $('#my_table').dataTable({ 
       bJQueryUI: true, 
       bServerSide: true, 
       bProcessing: true, 
       sAjaxSource: '/test.php' 
     }); 
}); 

var my_table; 

function redrawTable() { 
     var str = ''; 
     var boxes = new Array(); 

     //loop through all checkboxes 
     $(':checkbox').each(function() { 
      if ($(this).is(':checked')) { 
       boxes.push($(this).attr('name') + '=' + $(this).val()); 
      } 
     }); 

     str = '/test.php?' + boxes.join('&'); 
     // TODO: set my_table.sAjaxSource to str 
     my_table.fnDraw(); 
} 
</script> 
</head> 
<body> 

<p>Select fruit:</p> 
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p> 
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p> 
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p> 

<p>Select candy:</p> 
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p> 
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p> 

<p><input type="button" onclick="redrawTable();" value="Submit"></p> 

<table class="display" id="my_table"> 

<thead> 
<tr> 
<th>Column_1</th> 
<th>Column_2</th> 
<th>Column_3</th> 
</tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

</body> 
</html>

Espero su consejo, la forma de lograr esto (pasando los parámetros personalizados a la secuencia de comandos fuente AJAX de DataTables).

ACTUALIZACIÓN: este código parece funcionar bien para mí, gracias Nicola

<html> 
<head> 
<style type="text/css" title="currentStyle"> 
     @import "/css/demo_table_jui.css"; 
     @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css"; 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript"> 

var my_table; 

$(function() { 
     my_table = $('#my_table').dataTable({ 
       bJQueryUI: true, 
       bServerSide: true, 
       bProcessing: true, 
       sAjaxSource: '/test.php', 
       fnServerParams: function (aoData) { 
         $(':checkbox').each(function() { 
          if ($(this).is(':checked')) { 
           aoData.push({ name: $(this).attr('name'), value: $(this).val() }); 
          } 
         }); 
       } 
     }); 
}); 

</script> 
</head> 
<body> 

<p>Select fruit:</p> 
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p> 
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p> 
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p> 

<p>Select candy:</p> 
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p> 
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p> 

<p><input type="button" onclick="my_table.fnDraw();" value="Submit"></p> 

<table class="display" id="my_table"> 

<thead> 
<tr> 
<th>Column_1</th> 
<th>Column_2</th> 
<th>Column_3</th> 
</tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

</body> 
</html>

Y en el error_log veo:

QUERY_STRING: 
sEcho=2& 
iColumns=3& 
sColumns=& 
iDisplayStart=0& 
iDisplayLength=10& 
mDataProp_0=0& 
mDataProp_1=1& 
mDataProp_2=2& 
sSearch=& 
bRegex=false& 
sSearch_0=& 
bRegex_0=false& 
bSearchable_0=true& 
sSearch_1=& 
bRegex_1=false& 
bSearchable_1=true& 
sSearch_2=& 
bRegex_2=false& 
bSearchable_2=true& 
iSortingCols=1& 
iSortCol_0=0& 
sSortDir_0=asc& 
bSortable_0=true& 
bSortable_1=true& 
bSortable_2=true& 
fruits=apple& 
fruits=banana& 
candy=toffee& 
candy=fudge& 
_=1317666289823

Fuente

2011-10-02 Alexander Farber

Te agradezco mucho que hayas publicado tu código de trabajo * y * le hayas dado los accesorios a Nicola que te dio la llave. (en lugar de publicar su solución como una respuesta y darse crédito) –

Como se puede ver en this ejemplo, usted debe utilizar fnServerParams:

"fnServerParams": function (aoData) { 
    aoData.push({ "name": "more_data", "value": "my_value" }); 
}

donde aoData es una matriz de objetos para enviar al servidor

Fuente

2011-10-02 22:13:54

¡Gracias! ¿Todavía necesito llamar a fnDraw()? –

Sí, eso creo. –

actualización de tablas de datos procesados ​​por el servidor de origen con parámetros adicionales

Respuesta

Cuestiones relacionadas

actualización de tablas de datos procesados por el servidor de origen con parámetros adicionales