2011-10-02 8 views
8

मैं एक सर्वर संसाधित DataTables-टेबल #my_table में अतिरिक्त पैरामीटर (चयनित चेक बॉक्स की सूची) पारित करने के लिए जब एक इनपुट सबमिट बटन कोशिश कर रहा हूँ क्लिक किया गया है:अद्यतन अतिरिक्त पैरामीटर के साथ सर्वर संसाधित DataTables स्रोत

screenshot

कौन सा शायद इसका मतलब है मैं बैकएंड स्क्रिप्ट प्लस के लिए चेक बॉक्स के एक संकलित सूची my_table.sAjaxSource सेट और फिर my_ta कॉल करना होगा ble.fnDraw()?

मैं एक बहुत ही सरल परीक्षण का मामला तैयार किया है - test.php:

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

और 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> 

कृपया मुझे सलाह, कैसे इस लक्ष्य को हासिल करने के लिए (DataTables AJAX के स्रोत स्क्रिप्ट करने के लिए कस्टम पैरामीटर गुजर)।

अद्यतन: इस कोड मेरे लिए अच्छी तरह से काम करने लगता है, धन्यवाद निकोला

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

और error_log में मैं देख रहा हूँ:

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 
+0

मैं सुपर सराहना आप अपने काम कोड * पोस्ट करने और भेजने के लिए निकोला को रंगमंच की सामग्री जो आप कुंजी दिया दे रही है। –

उत्तर

11

आप this उदाहरण से देख सकते हैं आप का उपयोग करना चाहिए fnServerParams:

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

जहां aoData ऑब्जेक्ट की श्रृंखला * सर्वर

+0

धन्यवाद (बजाय एक जवाब के रूप में अपने समाधान पोस्टिंग और अपने आप ऋण देने की)! मैं अभी भी fnDraw कॉल करने के लिए() की आवश्यकता है? –

+3

हाँ मुझे ऐसा लगता है। –

संबंधित मुद्दे