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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:40:12  来源:igfitidea点击:

Understanding fnServerData in Datatables

jqueryjquery-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

fnServerDatais an internal function in dataTablesthat can be overwritten with your own ajaxhandler. In this case with a comfortable jQueryfunction Read more here.

fnServerData是一个内部函数dataTables,可以用您自己的ajax处理程序覆盖。在这种情况下具有舒适的jQuery功能在这里阅读更多

The parameters are defined in dataTablescore and are required in this particular order:

参数在dataTablescore中定义,并且按以下特定顺序需要:

1 - sSourceis 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 - aoDatais an array of parameters that will be sent to the datasource. This contains by default paginationinfo, sortinginfo, filterinfoetc. (which are automatically set by the core) to which your dataSourcescript should react. (For Example: Limit an sql query to pagesizeetc.) To send more info to your request you can push other values to aoData. Like so:

2 -aoData是将发送到数据源的参数数组。这包含在默认情况下paginationinfosortinginfofilterinfo等(这是由核心自动设置)到你的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 Firebugsconsole, 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 - fnCallbackis 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 JSafter the data was received.

3 -fnCallback也是内核的一个内置函数,可以被覆盖,但不是在这种情况下。如果您想在JS收到数据后进行一些后处理,您应该提供自己的函数。

Regarding the second part of your question: Of course you don't need to use PHPor JSP. Any server-side language that can serve JSONdata dynamically is fine (Python, Node, you name it ...)

关于你问题的第二部分:当然你不需要使用PHPor JSP。任何可以JSON动态提供数据的服务器端语言都很好(Python、Node,你能想到的……)