Question

（我使用的是Bootstrap4。）我正在尝试在<span id="spanId" onload="numEntries()"></span>

之类的跨度中显示从一个HTML页面到另一个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。如何显示表格中的行数？

Answer 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>

如何从单独的页面显示数据表中的行数？

1 个答案: