如何从单独的页面显示 DataTable 中的行数？答案

【问题标题】：How do I display the number of rows in a DataTable from a separate page?如何从单独的页面显示 DataTable 中的行数？
【发布时间】：2019-03-27 23:24:08
【问题描述】：

（我正在使用 Bootstrap 4。）我正在尝试在诸如 <span id="spanId" onload="numEntries()"></span> 之类的跨度内显示 DataTable 从一个 HTML 页面到另一个页面的行数

我尝试了从 iframe 调用页面的方法：

<iframe src="A.html" style="display:none" id="iframeId"></iframe>

（来自getElementById from another page）

然后访问表的行数：

function numEntries() {
  //call table element from other page through the iframe
  var divElement = document.getElementById('iframeId').contentWindow.document.getElementById('#alarmTable');
  //initialize the table
  var num = $(divElement).DataTable();
  document.getElementById("spanId").innerHTML = num.page.info().recordsTotal;
}

这个方法什么也没显示，我认为我对 iframe 的调用有问题。我还有一个用于表格数据的 jQuery 页面：

$('#alarmTable').DataTable({
    "data": [
        ["1", "2013-10-15 10:30:00", "2 min", "Alarm", "Motor 1", "Broken", "tag"],
        ["2", "2015-11-01 03:17:26", "8 min", "Warning", "Motor 2", "Stopped", "tag"]
    ]
});

此示例数据应显示 2。如何显示表格的行数？

【问题讨论】：

您使用的是本地脚本还是服务器端脚本？您想返回可用数据的总行数还是只返回表格中显示的行数？
@JoeMcCarty 我正在使用本地，但将来想更改为服务器端。全部都会显示在表格中，所以我想返回总行数。
太棒了。您应该能够通过 API 调用“[table].page.info().recordsTotal”获取数据集中的总行数。当您切换到 serverSide 时，您可以使用相同的调用，但您必须拥有自己的函数来从数据库中返回 JSON 对象中的这个数字。
@JoeMcCarty 谢谢，这部分很有帮助。不过，我仍然无法访问表格本身。我相信这条线：var divElement = document.getElementById('iframeId').contentWindow.document.getElementById('#alarmTable'); 是问题所在，但我不知道为什么。（我用 divElement 作为表格）
我认为您应该使用 var 设置您的表，如示例所示 [here] (datatables.net/manual/api)。看起来您稍后在 numEntries 函数中尝试将 var 分配给表，但您应该使用 var 初始化表，然后在函数 numEntries 中使用它来进行 api 调用。例如，如果你像 var num = $('#alarmTable').DataTable({ options }) 这样初始化表，那么你可以像“num.page.info() .recordsTotal”。您还使用了较旧的初始化方法。 [1.10 方式] (datatables.net/reference/option/data) 更好。

标签： javascript jquery html datatable datatables

【解决方案1】：

有很多错误，所以我将一一列举。

当您使用 getElementById 时，您不使用 # 前缀，# 前缀是 JQuery 和 CSS 的一个特性，它不是由 DOM 标准定义的这就是定义 getElementById 方法的行为的原因。
调用 JQuery 插件时，您必须使用定义插件的 JQuery 实例，在这种情况下是 iframe 文档中的 JQuery，而不是当前文档中的 JQuery。
并非所有浏览器都会在跨度上调用 onload。使用 jquery 的 $(document).ready 处理程序，但这不会告诉您子文档何时准备好。通常我会让子文档调用父文档以通知父文档子文档已准备好，但为了不更改子文档，也可以轮询子文档的所需属性。在这种情况下，检查 JQuery 和 DataTable 插件似乎就足够了。

这导致了一个实现预期结果的解决方案。

<script type="text/javascript">


    function numEntries() {

        var childWindow = document.getElementById('iframeId').contentWindow;

        // Poll For Required Features in Child Window (iframe)
        if (
            !childWindow.$ ||
            !childWindow.$(childWindow.document).DataTable
            ) {
            setTimeout(numEntries,50);
            return;
        }


        //call table element from other page through the iframe
        var divElement = childWindow.document.getElementById('alarmTable');

        //initialize the table
        var num = childWindow.$(divElement).DataTable();
        document.getElementById("spanId").innerHTML = num.page.info().recordsTotal;
    }   

    $(document).ready(function() {  
        numEntries(); 
    });

</script>

【讨论】：