Как загрузить данные jquery в элемент (DataTables) из json?

Question

[Алексей Самойлов]

Пытаюсь загрузить данные с url (Flask отдаёт json в нужном формате) и добавить их в таблицу DataTables.
Но данные не добавляются в элемент - возможно проблема с очередностью... Если добавить "alert(dataset)" в код - всё работает.

{% extends "base.html" %}

{% block content %}
<div class="container" style="background-color: #edebe8;">
    <table id="example" class="display" width="100%"></table>
</div>

<script src="/static/js/jquery.js"></script>
<script src="/static/js/datatables.js"></script>
<script src="/static/js/datatables.bootstrap.js"></script>
<script>
var dataset = []
$.getJSON( "/_dataset", function( data ) {
    $.each(data.data, function (index, id) {
        dataset.push(id);
    });
});

alert(dataset) // Без этого не выводит данные

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataset,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );
</script>
{% endblock %}

Answer 1

[Stalker_RED]

Чтобы убедиться, вставьте в точку #1 alert(dataset) а в точку #2 alert("Ура, данные пришли!")

Чтобы исправить положение, перенесите нижний кусок в точку #2

Comments

[Алексей Самойлов]

Спасибо! Правда уже сам разобрался.
А как сделать чтобы загрузка шла только после нажатия кнопки.

[Stalker_RED]

Алексей Самойлов:

$('button').on('click', functin(){
  $.getJSON( "/_dataset", function( data ) {
    $.each(data.data, function (index, id) {
        dataset.push(id);
    });
    // тут нижний кусок.
    // а еще можно вынести его в функцию.
  });
})

[frees2]

Stalker_RED: $(document).ready(function() { $('#btn1666').hover(function(){ $(this).remove();