How do I display the number of rows in a DataTable from a separate page?

Question

(I'm using Bootstrap 4.) I am trying to display the number of rows of a DataTable from one HTML page onto another, within a span such as <span id="spanId" onload="numEntries()"></span>

I tried the method of calling the page from an iframe:

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

(From getElementById from another page)

Then accessing the table's number of rows:

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;
}

This method displayed nothing, I think there is a problem with my call to the iframe. I also have a jQuery page for the table's data:

$('#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"]
    ]
});

It should display 2 for this example data. How do I show the number of rows in the table?

Are you using local or server side scripting? Do you want to return the total number of rows of available data or just the number of rows displayed in the table? — Joe McCarty, Oct 23 '18 at 16:47
@JoeMcCarty I'm using local but would like to change to server side in the future. All of it will be displayed in the table, so I want to return the total number of rows. — Julianna Reese, Oct 25 '18 at 15:45
Awesome. You should be able to get the number of total rows in the data set with the API call '[table].page.info().recordsTotal'. When you switch to serverSide you can use the same call, but you'll have to have your own function for returning this number in the JSON object from your database. — Joe McCarty, Oct 25 '18 at 21:09
@JoeMcCarty Thank you, this part is helpful. I am still having trouble accessing the table itself though. I believe this line: `var divElement = document.getElementById('iframeId').contentWindow.document.getElementById('#alarmTable');` is the issue, but I'm not sure why. (I use divElement as the table) — Julianna Reese, Oct 29 '18 at 16:29
I think you should set up your table with a var like the example shows [here] (https://datatables.net/manual/api). It looks like you try to assign a var to the table later in your numEntries function, but you should initialize the table with a var, THEN use it in your function numEntries to make the api call. For example, if you initialize the table like var num = $('#alarmTable').DataTable({ _options_ }), then you can make the api call like "num.page.info().recordsTotal". You're also using an older initialization method. The [1.10 way] (https://datatables.net/reference/option/data) is better. — Joe McCarty, Nov 01 '18 at 16:07
@JoeMcCarty Okay thank you, I updated my initialization method and variable assignment/api call. There must be some other problem though since nothing is displayed still. — Julianna Reese, Nov 06 '18 at 15:44

score 0 · Accepted Answer · answered Nov 06 '18 at 16:54

There are a number of bugs so I'll enumerate them.

When you use getElementById you don't use the # prefix, the # prefix is a feature of JQuery and CSS, it isn't defined by the DOM standard which is what defines the behavior of the getElementById method.
When calling JQuery plugins you must use the JQuery instance where the plugins are defined which in this case is the JQuery from the iframe document not from the current document.
Not all browsers are going to call onload on a span. Use jquery's $(document).ready handler, but that won't tell you when the child document is ready. Normally I would have the child document call the parent document to inform the parent document that the child is ready but for the purpose of not altering the child document it is also possible to poll for the required properties of the child document. In this case checking for JQuery and the DataTable plugin seems sufficient.

This leads to a solution that achieves the desired results.

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

How do I display the number of rows in a DataTable from a separate page?

1 Answers1