Question

我的页面中有两个dataTable，我的方法如下：

function ToDataTable()
{
    $(".dataTable").css("width", "100%");

    $(".dataTable").each(function ()
    {
        var $that = $(this);

        /* Start of method */
        function ToDataTableInternal()
        {
           var table = $that.DataTable({
               responsive: {
                   details: { type: "column", target: -1 },
               },
               columnDefs: [{
                       className: "control", orderable: !1, targets: -1,
                   },
                   { orderable: !1 }],
               "paging": false,
               "ordering": false,
               "info": false,
               "searching": false,
                retrieve: true
           });
        }
        /* End of method */

        if ($that.is(":visible"))
        {
            ToDataTableInternal()
        }
        else
        {
            // Observe all invisible parents or table to trigger
            // ToDataTableInternal method if made visible
            var $arr = $(this).parentsUntil(":visible").filter(function ()
            {
                return $(this).css("display") === "none";
            }).add($(this));

            var observers = [];

            $arr.each(function ()
            {
                var observer = new MutationObserver(function (mutations)
                {
                    mutations.forEach(function (mutation)
                    {
                        if ((mutation.attributeName === 'style' ||
                               mutation.attributeName === 'class') && 
                                 $that.is(":visible"))
                        {
                            ToDataTableInternal();

                            for (var i = 0; i < observers.length; i++)
                            {
                                // Disconnect observers
                                observers[i].disconnect();
                            }
                        }
                    });
                });

                observers.push(observer);
                observer.observe(this, {
                    attributes: true
                });
            });
        }
    });
}

我有这种方法的原因是，当表的显示为none时，它确实滞后于浏览器（尤其是IE，我在最短的5秒内无法做任何事情）这就是我改变的原因DataTable显示后的表格。

但单独调用方法的问题是第二个DataTable没有我传递的相同设置。（第一个有）相反，第二个也有过滤器，分页，排序元素。

如果我同时打电话给两个人，那么一切都不会发生。可能是什么问题？

编辑：我无法在小提琴中重现相同的行为。

Answer 1

当我尝试做同样的事情时，在其他环境中似乎没有问题。

我们使用的另一个库导致问题，DataTable库没有问题。

Answer 2

您可以在数据表配置中添加dataTable的以下属性，以删除过滤，分页和排序：

Datatable 1.9

＆＃34; bPaginate＆＃34;：false，//启用或禁用分页。
＆＃34; bFilter＆＃34;：false，//启用或禁用数据过滤
＆＃34; bLengthChange＆＃34;：false，//启用或停用尺寸下拉列表
＆＃34; bSort＆＃34;：false，//启用或禁用列的排序。
＆＃34; bInfo＆＃34;：false，//启用或禁用表格信息显示。

<强>更新

Datatable 1.10

数据表1.10中的选项名称更新

bPaginate - ＆gt;分页
bFilter - ＆gt;搜索
bLengthChange - ＆gt; lengthChange
bSort - ＆gt;排序
bInfo - ＆gt;信息

一页中的两个DataTable - 第二个初始化奇怪的

2 个答案:

Datatable 1.9

Datatable 1.10