jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 使用其他参数更新服务器处理的DataTables源大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在单击“提交”输入按钮时将其他参数(所选复选框列表)传递给服务器处理的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是要发送到服务器的对象数组

大佬总结

以上是大佬教程为你收集整理的jquery – 使用其他参数更新服务器处理的DataTables源全部内容,希望文章能够帮你解决jquery – 使用其他参数更新服务器处理的DataTables源所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: