使用附加参数更新服务器处理的 DataTables 源

发布于 2024-12-07 23:49:56 字数 5757 浏览 1 评论 0原文

当单击提交输入按钮时，我尝试将其他参数（选定复选框的列表）传递到服务器处理的 DataTables 表 #my_table：

screenshot

这可能意味着我必须将 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,
                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

原文

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:

screenshot

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幸福还没到 2024-12-14 23:49:56

正如您从 this 示例中看到的，您应该使用 fnServerParams:

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

其中 aoData 是要发送到服务器的对象数组

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

回复收藏 0 原文

~没有更多了~

关于作者

甲如呢乙后呢

暂无简介

0 文章

0 评论

23 人气

关注发私信

Gabu-gabumon

文章 0 评论 0

关注

qq_CgiN62

文章 0 评论 0

关注

荔枝明

文章 0 评论 0

关注

赏烟花じ飞满天

文章 0 评论 0

关注

独守阴晴ぅ圆缺

文章 0 评论 0

关注

¤→小豸慧

文章 0 评论 0

友情链接

文江博客

使用附加参数更新服务器处理的 DataTables 源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

使用附加参数更新服务器处理的 DataTables 源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。