Aggiornamento fonte DataTable server elaborata con ulteriori parametri

Sto cercando di passare parametri aggiuntivi (elenco delle caselle di controllo selezionati) a un server trasformati DataTable-tavolo #my_table quando un Invia pulsante di ingresso è stato fatto clic:Aggiornamento fonte DataTable server elaborata con ulteriori parametri

screenshot

che probabilmente significa devo impostare il my_table.sAjaxSource allo script di backend più un elenco compilato di caselle di controllo e quindi chiamare my_ta ble.fnDraw()?

ho preparato un semplice banco di prova - test.php:

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

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

Si prega di avvisare me, come raggiungere questo obiettivo (passare parametri personalizzati allo script sorgente AJAX DataTables).

UPDATE: questo codice sembra funzionare bene per me, grazie 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>

E nel error_log vedo:

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

fonte

2011-10-02 Alexander Farber

Apprezzo enormemente la pubblicazione del codice di lavoro * e * che fornisce gli oggetti di scena a Nicola che ti ha dato la chiave. (invece di pubblicare la tua soluzione come risposta e darti credito) –

Come si può vedere da this esempio si dovrebbe usare fnServerParams:

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

dove aoData è una matrice di oggetti da inviare al server

fonte

2011-10-02 22:13:54

Grazie! Devo ancora chiamare fnDraw()? –

Sì, penso di si. –

Aggiornamento fonte DataTable server elaborata con ulteriori parametri

risposta

Problemi correlati