Get 自定义 Jquery 数据表 GET 将发送到服务器的请求参数

Posted 2023-02-16

【中文标题】Get 自定义 Jquery 数据表 GET 将发送到服务器的请求参数

【英文标题】：Get to customize Jquery datatables GET request parameters that will be sent to the server

【发布时间】：2014-06-14 10:15:47

【问题描述】：

我正在使用 Jquery 数据表，我希望在加载页面时向服务器发送自定义的 GET 请求，而不是它发送的默认 GET 请求。这是它在加载时发送请求的 JS 部分

$(document).ready(function() 
    oTable=$('#ip_data').dataTable(
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": true,
        "bScrollCollpase": true,
        "sScrollY": "200px",
        "sAjaxSource": "/url"                                                           
    );
);

其中 #ip_data 是 html 表 ID，现在使用 onload 它可以完美运行，这是它发送的请求标头

http://domain.com/getdata?sEcho=1&iColumns=5&sColumns=%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSe arch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=1&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=2&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=3&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=4&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&sSearch=&bRegex=false&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&_=1402738395413

现在我正在使用的服务器是 Rpc，它必须获取一个方法、参数和 id 键，其中参数部分携带大量数据，即使上面显示的内容变成我手动拥有的下面这样的东西用过，它已经奏效了。差异包括

1 the addition of method=method
2 separation of method ,params and id by use of ';'
3 params=... which is valid json
4 id=1

http://domain.com:5000/?method=datatables;params="sEcho":"1", "iColumns":"5",    "sColumns":",,,,", "iDisplayStart":"0", "iDisplayLength":"10", "mDataProp_0":"0", "sSearch_0":"", "bRegex_0":"false", "bSearchable_0":"true", "bSortable_0":"true", "mDataProp_1":"1", "sSearch_1":"", "bRegex_1":"false", "bSearchable_1":"true", "bSortable_1":"true", "mDataProp_2":"2", "sSearch_2":"", "bRegex_2":"false", "bSearchable_2":"true", "bSortable_2":"true", "mDataProp_3":"3", "sSearch_3":"", "bRegex_3":"false", "bSearchable_3":"true", "bSortable_3":"true", "mDataProp_4":"4", "sSearch_4":"", "bRegex_4":"false", "bSearchable_4":"true", "bSortable_4":"true", "sSearch":"", "bRegex":"false", "iSortCol_0":"0", "sSortDir_0":"asc", "iSortingCols":"1" ;id=1

我知道 js 和 jquery 可以执行上述操作，但我没有成功使用 jquery 数据表，因为我无法在哪里向服务器发出我想要的自定义请求。帮助感谢。

【参考方案1】：

为了自定义请求，您需要在数据表初始化参数中添加fnServerData，该函数具有自定义的ajax调用，如下所示。您可以访问源，aoData中的默认数据，回调函数和设置，现在您可以像这样添加自己的自定义数据，

aoData["MyCustomValue"] = 123;

或者您可以简单地覆盖 aoData 对象，这取决于您 我在这里提出了发帖请求。

$(document).ready(function() 
    oTable=$('#ip_data').dataTable(
        "bProcessing": true,
        "bServerSide": true,
        "bPaginate": true,
        "bScrollCollpase": true,
        "sScrollY": "200px",
        "sAjaxSource": "/url",
        "fnServerData": function (sSource, aoData, fnCallback, oSettings) 
            aoData["MyCustomValue"] = 123;
            oSettings.jqXHR = $.post(sSource, aoData, fnCallback, "json");
        
    );
);

【讨论】：

您好，我已经遵循了这一点，并做到了它的完美，但方法和 id 部分被附加到请求的末尾，如 ...&iSortingCols=1&method=datatables&id=1 但我想将它们分开使用一种 ; .是否可以将参数作为我发布的 json 发送，例如 domain.com/?method=method;params=;id=1 其中参数是数据表变量，例如 sEcho iColumns e.t.c？

@GideonMaina 正如我在答案中提到的，我使用发布请求调用 ajax，因此查询字符串没有空间所有数据都将通过 formdata，因为请求是发布的。现在来到你的json点。是的，你可以像aoData["MyJson"] = "key" : "value" 这样传递json 试试

@GideonMaina 在查询字符串中传递 json 不好。最好通过 post 方法传递它

好的，我会想办法让 Rpc 服务器从原始请求中提取方法。

【参考方案2】：

您应该可以使用以下方法添加id=1 和method=datatables。

var oTable = $('#ip_data').DataTable( 
    "serverSide": true,
    "ajax": 
        "url": "/url",
        "data": 
            "method": "datatables",
            "id": "1",
        
    ,
);

在我读过的所有内容中，没有任何内容支持使用分号而不是 & 作为分隔符来构造查询字符串。为此，您必须推出自己的功能，请参阅此处的最后一个示例 https://datatables.net/reference/option/ajax.data

另外，传递原始 json 有点讨厌。我的建议是让数据表自动发送参数。如果您使用 'serverSide: true,' 选项，Datatables 会自动执行此操作。

【讨论】：

感谢@ZenCodr，我已经尝试过aoData，它仍然有效，你的方法很好！

@GideonMaina 刚刚完全改变了我的答案。不要使用查询字符串传递 json 字符串。让数据表为你做这件事。

@ZenCodr 谢谢！您能否提供指向手册部分的链接或您在哪里找到的文档？

当然，文档是做什么用的？我放了一个 ajax-data 的链接。我刚刚在同一个 datatables.net 站点上找到的所有其他内容。文档很棒。尤其是手册。

【参考方案3】：

就我而言。我正在发送以下代码

$('#transactions_table').DataTable( 
        "processing": true,
        "bLengthChange": false,
        "pageLength": 3,
        "bFilter" : false,
        "serverSide": true,
        "headers": 'Content-Type':'application/x-www-form-urlencoded',
        "ajax":
            data:currency:currency_code,date_from:date_from,date_to:date_to,is_zero_fee:is_zero_fee,
            url :"http://ischool.pk",
            type: "GET"
        ,"columns": [
             "data": "transaction_id" ,
             "data": "currency" ,
             "data": "side" ,
             "data": "transaction_detail" ,
             "data": "insert_date" ,
             "data": "transaction_fee" ,
             "data": "amount" ,
             "data": "user_id" 
        ]          
    );