如何在重新加载数据表时传递参数

Posted 2023-05-07

【中文标题】如何在重新加载数据表时传递参数

【英文标题】：how to pass parameters on reload of datatables

【发布时间】：2014-08-21 08:31:39

【问题描述】：

我有一个这样初始化的数据表：

mytable = DataTable(
        ajax:
            url: "/url/getTableData",
            dataSrc: ""

        ,
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
    );

以后我想做

mytable.ajax.reload();

它工作正常，但现在我想在该请求中发送一些参数。我只在重新加载时需要这些参数，而不是在表的初始化中。 我怎么做？ 谢谢！

【问题讨论】：

您是否阅读过文档？看起来您可以在重新加载之前使用其中任何一个：datatables.net/reference/api/ajax.url() 和 datatables.net/reference/option/ajax.data

我确实阅读了文档，但找不到答案。我不想更改网址，只更改参数。而且我不确定使用您建议的网址是否在这个意义上对我有帮助，尽管它确实是一个解决方案。

根据您所说的“一些参数”，更改 URL 是一种选择（添加查询字符串）。但是，如果您想在 POST 请求的正文中传递数据，请使用我的第二个链接 (datatables.net/reference/option/ajax.data) - 我很确定这是一个比您接受的答案更好的示例，而且它似乎正是为了什么你正在尝试做，而不是一个hacky的解决方案

它看起来是正确的答案。我会试试的。非常感谢您的解释。

【参考方案1】：

选项 1 - 使用 preXhr.dt 事件。

table = $('#example')
    .on('preXhr.dt', function ( e, settings, data ) 
        data.whateveryouwant = $("#someidhere").val()
        data.anotherexample = "kittens"
     )
// then just setup your datatable as normal
    .DataTable(
        ajax:
            url: "/url/getTableData",
            type: "GET" // This is the default value, could also be POST
        ,
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
);

看这里http://datatables.net/reference/event/

选项 2（首选） - 使用 ajax.data 函数。

table = $('#example').DataTable(
    ajax:
        url: "/url/getTableData", // Change this URL to where your json data comes from
        type: "GET", // This is the default value, could also be POST, or anything you want.
        data: function(d) 
            d.whateveryouwant = $("#someidhere").val()
            d.anotherexample = "kittens"
        

    ,
    sortClasses: false,
    paging: false,
    scrollY: 300,
    columns: cols
);

两个选项产生相同的结果。您的服务器将不知道其中的区别。额外的数据将添加到每个table.ajax.reload()。额外的数据将是：

whateveryouwant 的值为#someidhere 元素，并且

anotherexample 的值为 "kittens"

我更喜欢选项 2，因为更明显的是，每个请求都会添加额外的数据。第一个选项有点偷偷摸摸，我认为对于阅读您的代码的其他人来说并不那么明显。

【讨论】：

感谢您的出色回答 (+1)。简短的问题：为什么不工作 data: "whatEverYouWant" : $("#someidhere").val() ) 因为它不工作但功能工作？我是 javascript 的新手

【参考方案2】：

我的用例不同，我不想永久更改页面的 ajax 操作。这对我来说只有在单击刷新时才能更改 ajax 调用，这意味着服务器端调用（即用于表格排序等）可以有不同的行为：

    // Create a refresh button
    $.fn.dataTable.ext.buttons.refresh = 
        text: 'Refresh',
        action: function ( e, dt, node, config ) 
          var origurl = dt.ajax.url();
          dt.ajax.url(origurl+"?forcereload=true").load();
          dt.ajax.url(origurl);
        
    ;