我正在尝试在单击“提交”输入按钮时将其他参数(所选复选框列表)传递给服务器处理的DataTables表#my_table：
这可能意味着我必须将my_table.sAjaxSource设置为后端脚本以及已编辑的复选框列表,然后调用my_table.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源脚本).
更新：感谢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,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
解决方法
从
this示例中可以看出,您应该使用fnServerParams：
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data","value": "my_value" } );
}
其中aoData是要发送到服务器的对象数组
