使用其他参数更新服务器处理的DataTables源 [英] Update server-processed DataTables source with additional parameters
本文介绍了使用其他参数更新服务器处理的DataTables源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当您点击提交输入按钮时，我尝试将其他参数（所选复选框的列表）传递到服务器处理的DataTable表 #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 / csstitle =currentStyle>
@import/css/demo_table_jui.css;
@importhttp://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css;
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< script> ;;
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js>< / script> ;
< script type =text / javascriptsrc =/ 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（）;
//通过所有复选框
$（'：checkbox'）。每个（function（）{
if（$（this）.is（'：checked' ）{
boxes.push（$（this）.attr（'name'）+'='+ $（this）.val（））;
}
}
str ='/test.php？'+ boxes.join（'&'）;
// TODO：将my_table.sAjaxSource设置为str
my_table.fnDraw（）;
}
< / script>
< / head>
< body>
< p>选择水果：< / p>
< p>< label>< input type =checkboxname =fruitsvalue =apple> apple< / label>< / p>
< p>< label>< input type =checkboxname =fruitsvalue =banana> banana< / label>< / p&
< p>< label>< input type =checkboxname =fruitsvalue =pear> pear< / label>< / p&
< p>选择糖果：< / p>
< p>< label>< input type =checkboxname =candyvalue =toffee>太妃糖< / label>< / p&
< p>< label>< input type =checkboxname =candyvalue =fudge> fudge< / label>< / p&
< p>< input type =buttononclick =redrawTable（）; value =Submit>< / p>
< table class =displayid =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源代码脚本） p>
更新：，这段代码似乎对我很好，感谢Nicola
< html>
< head>
< style type =text / csstitle =currentStyle>
@import/css/demo_table_jui.css;
@importhttp://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css;
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js><脚本>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js>< / script>
< script type =text / javascriptsrc =/ 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' b if（$（this）.is（'：checked'））{
aoData.push（{name：$（this）.attr（'name'），value：$（this）.val }）;
}
}）;
}
}）;
}）;
< / script>
< / head>
< body>
< p>选择水果：< / p>
< p>< label>< input type =checkboxname =fruitsvalue =apple> apple< / label>< / p&
< p>< label>< input type =checkboxname =fruitsvalue =banana> banana< / label>< / p&
< p>< label>< input type =checkboxname =fruitsvalue =pear> pear< / label>< / p&
< p>选择糖果：< / p>
< p>< label>< input type =checkboxname =candyvalue =toffee>太妃糖< / label>< / p&
< p>< label>< input type =checkboxname =candyvalue =fudge> fudge< / label>< / p&
< p>< input type =buttononclick =my_table.fnDraw（）; value =Submit>< / p>
< 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 =真&
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& amp;
fruits = apple&
fruits = banana&
candy = toffee&
candy = fudge&
_ = 1317666289823
解决方案
从此示例，您应该使用fnServerParams：
fnServerParams：function（aoData）{
aoData.push（{name：more_data，value：my_value}）;
}
其中aoData是要发送给服务器的对象数组
I'm trying to pass additional parameters (list of selected checkboxes) to a server-processed DataTables-table #my_table when a Submit input button has been clicked:
Which probably means I must set the my_table.sAjaxSource to the backend script plus a compiled list of checkboxes and then call my_table.fnDraw()?
I've prepared a very simple test case - test.php:
<?php
error_log('QUERY_STRING: ' . $_SERVER['QUERY_STRING']);
?>
and 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>
Please advise me, how to achieve this (passing custom params to DataTables AJAX source script).
UPDATE: this code seems to work well for me, thanks 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>
And in the error_log I see:
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
解决方案
As you can see from this example you should use fnServerParams:
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "my_value" } );
}
where aoData is an array of objects to send to the server
这篇关于使用其他参数更新服务器处理的DataTables源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
