Datatable не работает с javascript settimeout fuction?

Question

Я хочу вывод таблицы здесь -

Это действительно дает вывод. Такие функции, как отзывчивость, сортировка, поиск, не работают. Но когда я убираю задержку в 3000 миллисекунд, она работает отлично.

setTimeout(function() {
  document.getElementById('tbl_display').innerHTML = '<table id="data-table" class="table table-striped table-bordered nowrap"><thead><tr><th>Product Name</th><th>ASIN</th><th>Image</th><th>Reimburse</th><th>Total Units</th><th>Total Sales</th><th>Profit</th></tr></thead><tbody><tr class="odd"><td><span class="text-primary">SW20 16GB memory</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$30.00</td><td>$13.00</td></tr><tr class="even"><td><span class="text-primary">Scinex Bluetooth headset</span></td><td>B0000089451</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$7.00</td><td>$3.00</td></tr><tr class="odd"><td><span class="text-primary">SW30</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>Refund</td><td>--</td><td>$39.00</td><td>$0.00</td></tr></tbody></table>';
}, 3000);

<div class="sales-info-table" id="tbl_display">

</div>

Answer 1

Страницей нельзя манипулировать безопасно, пока документ не будет «готов». JQuery обнаруживает это состояние готовности для вас. Код, включенный в $ (document) .ready (), будет запускаться только после того, как страница объектной модели документа (DOM) будет готова для выполнения кода JavaScript. Код, включенный в $ (window) .on ("load", function () {...}), будет запущен, когда будет готова вся страница (изображения или iframes), а не только DOM.

См. Jquery $ (документ) .ready () документация

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(
        function(){
            document.getElementById('tbl_display').innerHTML='<table id="data-table" class="table table-striped table-bordered nowrap"><thead><tr><th>Product Name</th><th>ASIN</th><th>Image</th><th>Reimburse</th><th>Total Units</th><th>Total Sales</th><th>Profit</th></tr></thead><tbody><tr class="odd"><td><span class="text-primary">SW20 16GB memory</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$30.00</td><td>$13.00</td></tr><tr class="even"><td><span class="text-primary">Scinex Bluetooth headset</span></td><td>B0000089451</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>--</td><td>--</td><td>$7.00</td><td>$3.00</td></tr><tr class="odd"><td><span class="text-primary">SW30</span></td><td>B0245448898</td><td><img src="https://www.scinex.com/uploads/products/PD266/1537943878396_100.png" class="img-responsive" style="width:25px; height:auto" /></td><td>Refund</td><td>--</td><td>$39.00</td><td>$0.00</td></tr></tbody></table>';
        });      
</script>

Answer 2

Причина: к тому моменту, когда ваш сценарий с данными может быть запущен, DOM не будет готов.

Решение: поскольку вы уже используете jQuery, проверьте метод ready .