Как отобразить количество строк в DataTable с отдельной страницы? - PullRequest
Новая
       30

Как отобразить количество строк в DataTable с отдельной страницы?

0 голосов
/ 23 октября 2018

(я использую Bootstrap 4.) Я пытаюсь отобразить количество строк DataTable с одной HTML-страницы на другую в пределах интервала, такого как <span id="spanId" onload="numEntries()"></span>

Я попробовал методвызов страницы из iframe: 

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

(из getElementById с другой страницы )

Затем доступ к числу строк таблицы: 

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.Как мне показать количество строк в таблице?

1 Ответ

0 голосов
/ 06 ноября 2018

Есть несколько ошибок, поэтому я перечислю их.

  1. Когда вы используете getElementById, вы не используете префикс #, префикс # является функцией JQuery и CSS, этоне определяется стандартом DOM, который определяет поведение метода getElementById.
  2. При вызове плагинов JQuery вы должны использовать экземпляр JQuery, в котором определены плагины, в данном случае это JQuery из документа iframe, а не из текущего документа.
  3. Не все браузеры собираютсявызовите 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>
...