Question

我在同一网页上有两个数据表，它们的列数均来自DAPIFERENT API。如果我将“网格”类添加到一个或另一个中，则该表将显示该表的正确数据。但是，如果我在两个表中都添加了“ grid”类，则第一个表的数据将显示在两个表中。

“ grid”类是一个非常复杂的DataTable，涉及大量配置，但是以下是“ grid”的初始化方式：

var t = $(".grid").DataTable({
        iDisplayLength: 10,
        columnDefs: [{
            "searchable": false,
            "orderable": bOrderBy,
            "targets": 0
        }],
        order: [[0, orderDir]],
        ajax: {
            url: src,
            dataSrc: ""
        },
        columns: [
            {
                data: f1
            },
            {
                data: f2
            },
            {
                data: f3
            },
            {
                data: f4
            },
            {
                data: f5,
. . . "blah, blah, blah"
});

t.on('post-body.bs.table', function () {
        $('[data-toggle="tooltip"]').tooltip({
            container: 'body',
            placement: 'top'
        });
    });


    if (autoNum == "Y") {
        t.on('order.dt search.dt', function () {
            t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();
    }

我该如何解决？

Answer 1

现在，它将相同的DataTable实例应用于.grid选择器中选择的任何内容，这就是为什么它们返回相同的原因。如果表选项相同，则可以将其保存到obj中，然后将其传递给每个调用。用不同的ID或不同的类命名这两个表

var dtOptions = {
    iDisplayLength: 10,
    columnDefs: [{
        "searchable": false,
        "orderable": bOrderBy,
        "targets": 0
    }],
    order: [[0, orderDir]],
    ajax: {
        url: src,
        dataSrc: ""
    },
    columns: [
        {
            data: f1
        },
        {
            data: f2
        },
        {
            data: f3
        },
        {
            data: f4
        },
        {
            data: f5,
. . . "blah, blah, blah"
};

$("#mytable1).DataTable(dtOptions);
$("#mytable2).DataTable(dtOptions);

您可能需要更改第二张表的ajax src，因为您说它们来自单独的api。您可以根据需要复制options对象并修改ajax src。

var dtOptions2= $.extend(true, {}, dtOptions);
dtOptions2.ajax.url = "somthing-else...";
$("#mytable2).DataTable(dtOptions2);

来自同一页面上不同API的两个DataTables显示相同的数据

1 个答案: