jQuery 理解数据表中的 fnServerData
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21704398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Understanding fnServerData in Datatables
提问by Saurabh
I am trying to use Datatables in my project. I want to understand the use of "fnServerData" callback option. I have gone through the doc Hereand have seen following example code -
我正在尝试在我的项目中使用数据表。我想了解“fnServerData”回调选项的使用。我已经阅读了此处的文档并看到了以下示例代码 -
$(document).ready( function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "xhr.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
} );
What is "sSource", "aoData" parameters here and how we are supplying values in it? Also, instead of putting a JSP or PHP as a source (sAjaxSource), can we submit a form which will get JSON data dynamically?
这里的“sSource”、“aoData”参数是什么以及我们如何在其中提供值?此外,我们可以提交一个动态获取 JSON 数据的表单,而不是将 JSP 或 PHP 作为源 (sAjaxSource)?
回答by mainguy
fnServerData
is an internal function in dataTables
that can be overwritten with your own ajax
handler. In this case with a comfortable jQuery
function Read more here.
fnServerData
是一个内部函数dataTables
,可以用您自己的ajax
处理程序覆盖。在这种情况下具有舒适的jQuery
功能在这里阅读更多。
The parameters are defined in dataTables
core and are required in this particular order:
参数在dataTables
core中定义,并且按以下特定顺序需要:
1 - sSource
is the URL where your datasource is located. It is set at initialization to the value in sAjaxSource
. In this case xhr.php
1 -sSource
是数据源所在的 URL。它在初始化时设置为 中的值sAjaxSource
。在这种情况下xhr.php
2 - aoData
is an array of parameters that will be sent to the datasource. This contains by default paginationinfo
, sortinginfo
, filterinfo
etc. (which are automatically set by the core) to which your dataSource
script should react. (For Example: Limit an sql query to pagesize
etc.) To send more info to your request you can push other values to aoData
. Like so:
2 -aoData
是将发送到数据源的参数数组。这包含在默认情况下paginationinfo
,sortinginfo
,filterinfo
等(这是由核心自动设置)到你的dataSource
脚本应该作出反应。(例如:将 sql 查询限制为pagesize
等)要向您的请求发送更多信息,您可以将其他值推送到aoData
. 像这样:
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
aoData.push( { "name": "Input1", "value": $("#data1").val() } );
aoData.push( { "name": "Input2", "value": $("#data2").val() } );
oSettings.jqXHR = $.ajax( {
(Will get the values of two input fields named data1 and data2 via jQuery from a form and include them in the POST as Input1 and Input2)
(将从表单中通过 jQuery 获取名为 data1 和 data2 的两个输入字段的值,并将它们作为 Input1 和 Input2 包含在 POST 中)
If you want to know what's being sent, you can look at the POST Data with Firebugs
console, or you can change type to GET
. Then you'll see the passed parameters in the address bar (Beware that this can be a very long string which might get cut off).
如果您想知道正在发送什么,您可以使用Firebugs
控制台查看 POST 数据,或者您可以将类型更改为GET
. 然后您将在地址栏中看到传递的参数(请注意,这可能是一个很长的字符串,可能会被截断)。
3 - fnCallback
is also a built-in function of the core that can be overwritten, but is not in this case. You should provide your own function in case you want to do some post-processing in JS
after the data was received.
3 -fnCallback
也是内核的一个内置函数,可以被覆盖,但不是在这种情况下。如果您想在JS
收到数据后进行一些后处理,您应该提供自己的函数。
Regarding the second part of your question: Of course you don't need to use PHP
or JSP
. Any server-side language that can serve JSON
data dynamically is fine (Python, Node, you name it ...)
关于你问题的第二部分:当然你不需要使用PHP
or JSP
。任何可以JSON
动态提供数据的服务器端语言都很好(Python、Node,你能想到的……)