Datatables jquery动态设置ajax url参数答案

【问题标题】：Datatables jquery dynamically setting ajax url parameterDatatables jquery动态设置ajax url参数
【发布时间】：2018-04-02 18:35:04
【问题描述】：

我正在使用数据表并通过 ajax 从数据库中检索数据：

        ...
        deferRender: true,
        ajax: {
            url: "/api/tracks/classical",
            dataSrc: '',
            contentType: "application/json"
        },
        "columns": [
            { "data": "Category" },
            { "data": "Title" },
         ...

选择菜单选项后，我想更改 url 以读取一组不同的数据并重新加载表格：例如 /api/tracks/classical 将变为 /api/tracks/声学

（这实际上是使用不同的参数调用相同的 api。）

我尝试在单击菜单时设置新的 url，调试时我可以看到它确实调用了新的 url，但随后立即再次调用旧的 url，并且重新绘制了相同的表格。

 $('#menu-t-acoustic').click(function () {
       $('#mytable').ajax.url('/api/tracks/acoustic').load();
 });

那么我该如何使用 jquery/json/datatables 来实现呢？

我在想那个网址

    ajax: {
        url: "/api/tracks/classical"

应该能够使用变量而不是硬编码字符串，但我不知道任何语法可以做到这一点 - 有可能吗？

那么...我应该如何动态设置 ajax url - 以及如何让数据表使用新的 url 重新加载？

【问题讨论】：

标签： jquery json ajax url datatables

【解决方案1】：

尝试在datatables 返回的实例变量上调用load。像

var yourdatatable = $('#mytable').DataTable( {
                     ....
                     ajax: {
                      url: "/api/tracks/classical",
                      dataSrc: '',
                      contentType: "application/json"
                     },
                     ....
                    });

yourdatatable.ajax.url('/api/tracks/acoustic').load();

文档中的示例。

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

table.ajax.url( 'newData.json' ).load();

【讨论】：

【解决方案2】：

好吧，要实现动态渲染，您可以使用变量（即var apiToQuery），然后将其添加到您的 api url 的末尾：

$('.yourMenuButtons').click(function () {
    var apiToQuery = $(this).val();
    $('#mytable').ajax.url('/api/tracks/' + apiToQuery).load();
});

但是，要回答有关它呈现默认 ajax 调用的问题，是否需要硬编码？我认为您可以将 ajax 调用从初始表代码中移除，然后在单独的事件处理程序中执行此操作：

$('document').ready(function() {
    $('#mytable').ajax.url('/api/tracks/defaultApiQuery').load();
}

【讨论】：

【解决方案3】：

当您创建 DataTable 时，将其分配给一个变量：

var datatable;

$(document).ready(function () {
    datatable = $("#table").DataTable({
        ...
    });
});

function filterResults(filter) {
    datatable.ajax.url('/api/tracks/' + filter).load();
}

DataTables 会很好地附加它自己的参数。祝你好运！

有点晚了，但我认为这可以帮助其他人......

【讨论】：