Question

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

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

当选择菜单选项时，我想更改URL以读取不同的数据集并重新加载表：例如 / api / tracks / 经典将成为 / API /音轨/的声

（这实际上是使用不同的参数调用相同的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网址？以及如何使用新网址重新加载数据表？

Answer 1

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

之类的东西

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();

Answer 2

嗯，要实现动态渲染，您可以使用变量（即$('.someClass').daterangepicker({ "alwaysShowCalendars": true, "startDate": fromDate, "endDate": toDate, });），然后将其添加到您的api url的末尾：

var apiToQuery

然而，要回答关于它呈现默认ajax调用的问题，是否需要进行硬编码？我想你可以把ajax调用从初始表代码中删除，然后在一个单独的事件处理程序中执行：

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

Answer 3

创建数据表时，将其分配给一个变量：

var datatable;

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

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

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

比较晚，但我认为这可以帮助其他人......

Datatables jquery动态设置ajax url参数

3 个答案: