同一页面上的多个 DataTables 具有不同的 ajax 源

Posted 2023-05-07

【中文标题】同一页面上的多个 DataTables 具有不同的 ajax 源

【英文标题】：Multiple DataTables on the same page with different ajax sources

【发布时间】：2011-12-11 07:05:36

【问题描述】：

我在一个页面上使用dataTables 有多个表格。每个都需要有自己的“sAjaxSource”。我似乎无法弄清楚如何做到这一点。这是我拥有的最少代码：

         var oTable = $('.datatable').dataTable( 
                "bProcessing": true,
                "sAjaxSource": "/ajax/function",
                "bSort": false,
                "fnDrawCallback": function() 
                       //some click events initilized here
                 
            );

这基本上是最基本的设置。每个表作为数据表类和一个唯一的 ID。但不确定如何根据特定表更改 AjaxSource。

谢谢！

编辑：

这是我最终做的：

        $('.datatable').each(function(index)

             $('#'+$(this).attr('id')).dataTable( 
                "bProcessing": true,
                "sAjaxSource": $(this).children('caption').html(),
                "bSort": false,
                "fnDrawCallback": function() 
                 
            );
        );

在表格中，我放置了一个被 css 隐藏并包含 Ajax 源 URL 的标题标签。它遍历每个实例并获取 url。

到目前为止，这似乎有效！

【参考方案1】：

这行不通吗？它使用 id 而不是类来唯一标识每个数据表，并根据 id 将单独的源附加到每个表。

  var oTable = $('#FirstDataTableID').dataTable( 
            "bProcessing": true,
            "sAjaxSource": "/ajax/function",
            "bSort": false,
            "fnDrawCallback": function() 
                   //some click events initilized here
             
        );

  var oTable = $('#SecondDataTableID').dataTable( 
            "bProcessing": true,
            "sAjaxSource": "/ajax/other_function",
            "bSort": false,
            "fnDrawCallback": function() 
                   //some click events initilized here
             
        );

【讨论】：

是的，可能，但我不想为每一个都使用全新的初始化，很快就会变得非常混乱。

好吧，为每个数据表单独初始化而不为每个数据表单独初始化是非常棘手的，这就是您所要求的。您可以尝试基于类进行一个通用初始化，然后分开较小的初始化，仅指定源属性，这样就不会重复通用代码。

我刚刚用一个似乎有效的解决方案更新了我的帖子，你怎么看？发现任何问题？

对我来说似乎有些复杂，但如果你有很多，它可能是有道理的。但是，我不会以这种方式使用额外的元素，而是将源作为自定义属性或通过 jQuery.data() 附加到可数据元素本身。

好主意，我尝试使用 jQuery.data() 但是，它似乎没有保留价值。也许 dataTables 删除它？您认为还有什么其他属性更合适？

【参考方案2】：

我遇到了同样的问题，我使用类似于你的 html5 数据属性和初始化代码解决了这个问题：

$('.dataTableServer').each(function () 
        var source = $(this).attr("data-source");
        $(this).dataTable(
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": source
        );
    );

这样您就不必为每个数据表创建一个 id

【参考方案3】：

您需要单独选择每个表并对其应用适当的 Ajax 数据源，以便获得所需的内容。现在您正在根据类名进行选择：

$(".dataTable")

可能需要转换为：

$("#dataTable1")

如果你有很多桌子，我想这会变得乏味，但这几乎是你可以做你打算做的事情的唯一方法。

【参考方案4】：

您可以在同一页面上使用两个或多个。我已经做到了，数据表工作得很好。 Datatables 将数据存储在本地，即使记录是从其中异步删除的。因此，当我们搜索已删除的记录时，我们需要明确始终显示正确的结果。 由于数据表只需要初始化一次，我们需要记住，对于同一页面上的每个数据表，我们必须继续初始化数据表，因为它们正在存储本地记录，因为我们不希望这样，因为在同一页面上我们确实存储/显示不同的数据。

所以。我们必须像

$("#Id_of_Current_DTBL").DataTable().destroy();
$("#Id_of_Other1_DTBL").DataTable().clear();
$("#Id_of_Other2_DTBL").DataTable().clear();

这将解决问题。