Колба: заполнить таблицу данных переменной, а не файлом

Question

Здравствуйте. Я пытаюсь заполнить таблицу с помощью Flask и Data Tables - и сделать это fast .Рендеринг всей HTML-таблицы слишком медленный, поэтому я попытался (и преуспел), используя ajax: url-to-file и deferRender: True.Однако я хочу сделать это, просто передав данные и используя JavaScript или Ajax, каким-то другим способом - без файла.

Я пробовал различные способы заполнения таблицы, например , передаваяURL другого маршрута , но безрезультатно.

Единственный способ найти данные в шаблоне, как я нашел, - это следующий способ.К сожалению, мне не удается выполнить последнюю задачу по заполнению таблицы.

Маршрут в views.py:

    @main.route('/table_display_route')
    def table_display():
        # ...
        # creating df from session items
        # ...
        columns = df.columns # for a dynamically created table

        table_json = json.dumps(json.loads(df.to_json(orient='index')))

        return render_template('display.html', columns=columns, 
                                table_json=table_json)

table_json имеет следующую форму:

"1": {"col1": "atr1", "col2": "atr2", ...}, "2": {... etc ...

Затем display.html, отображая только заголовки таблицы:

 ..
    <thead>
      <tr>
        {% for column in columns %}
          <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
 ...

И скрипт, который пытается заполнить строки следующим образом, не работает:

$('#display_table').find('table').DataTable( {
    data: {{ table_json }},
    // ... 
} );

Есть предложения?

РЕШЕНИЕ (согласно выбранному ответу с небольшими изменениями):

views.py:

@main.route('/table_display_route')
def table_display():
    // .. building df from session

    # get table headers and rows
    columns = df.columns
    rows = df.to_json(orient='values')

    return render_template('display.html', columns=columns, rows=rows,...)

display.html:

...
<div id="display_table">
  <table class="cell-border" >
    <thead>
      <tr>
        {% for column in columns %}
          <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
  </table>
</div>
...

Сценарий:

// set table as DataTable
var display_table = $('#display_table').find('table').DataTable({
    ...
    deferRender: true
});

function loadTable() {
    $.get('table_display_route', function(response, status){
        var data = {{ rows }};
        display_table.clear();

        Object.keys(data).forEach(function(key) {
            // fill row
            row = data[key]

            // append to table
            display_table.row.add(row);
        });

        // Update table -- make rows visible.
        display_table.draw();
    });
}

//execute function
loadTable();

Answer 1

Если вы хотите использовать DataTables и Flask и хотите выполнить рендеринг шаблона, я бы порекомендовал вам включать шаблон таблицы непосредственно в HTML, который предпочитают jinja2 и Flask, а не использовать это сделано через JavaScript. Поскольку вы выполняете рендеринг шаблона, ваша HTML-таблица будет автоматически обновляться в соответствии с вашими желаемыми данными json, когда этот маршрут используется или вызывается. Вот пример этого ниже:

Маршрут в views.py

@main.route('/table_display')
def table_display():
    # ...
    # creating df from session items
    # ...
    columns = df.columns # for a dynamically created table

    table_d = df.to_json(orient='index')

    return render_template('display.html', columns=columns, 
                            table_data=table_d)

, где структура данных columns - это массив строк (столбцов), а table_json структурирован как "1": { "col1": "atr1", "col2": "atr2", ... }, "2": { ...etc...

Макет в display.html

<table id="test-table" class="table display" cellspacing="0" width="100%">
    <thead>
        <tr>
            {% for c in columns %}
                <th scope="col">{{c}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for k, v in table_data.items() %}
            <tr>
                <td>{{v.col1}}</td>
                <td>{{v.col2}}</td>
                ...
                <td>{{v.colN}}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

и text/javascript код

var test_table = $('#test-table').DataTable();

Изменить 2018-09-11 для отражения комментариев

Использование только javascript без рендеринга шаблонов:

Привет, как насчет этой функции:

var test_table = $('#test-table').DataTable({deferRender: true});

function loadTable() {
    $.get('flask_route', function(response, status){
        var data = response['data'];
        test_table.clear();

        Object.keys(data).forEach(function(key) {
            // fill row
            row = []

            // append to table
            test_table.row.add(row);
        });

        // Update table -- make rows visible.
        test_table.draw();
    });
}