更新服務器處理數據表與其他參數源

我試圖通過額外的參數（複選框處於選中狀態列表）的服務器處理數據表，表#my_table當提交輸入按鈕被點擊：更新服務器處理數據表與其他參數源

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源腳本）。

UPDATE：此代碼似乎很適合我的工作，感謝尼古拉

<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

來源

2011-10-02 Alexander Farber

我非常感謝您發佈您的工作代碼*和*提供道具給Nicola誰給了你關鍵。（而不是張貼您的解答作爲答案並且給自己信用） –

你可以從this例子看，你應該使用fnServerParams：

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

其中aoData是要發送到服務器的對象數組

來源

2011-10-02 22:13:54

謝謝！我還需要調用fnDraw（）嗎？ –

是的，我認爲是。 –

更新服務器處理數據表與其他參數源

回答

相關問題