Управляйте таблицей HTML, отображаемой из Flask, в Javascript

Question

Я все еще нахожусь в процессе изучения, как все работает, но я пытаюсь собрать проект, в котором есть таблица, которую нужно отсортировать. Я использую flask для генерации страниц и планирую сохранить информацию для таблицы, хранящейся в sql. В настоящее время я использую жестко запрограммированную таблицу словарей, которая в конечном итоге будет преобразована из этой sql базы данных. Я успешно получил свою страницу html для загрузки элемента таблицы flask в таблицу на веб-странице. Тем не менее, я хотел бы позволить пользователям сортировать эту таблицу, и я считаю, что использование Javascript было бы лучшим способом сделать это.

Однако, прежде чем я начну писать функцию сортировки, проблема, с которой я столкнулся, каким-то образом передать таблицу словарей, которая отображается в Flask, в мой Javascript файл. Я считаю, что было бы лучше, если бы html сначала отображал таблицу из Flask, а затем Javascript извлекал бы информацию о таблице прямо со страницы html.

Чтобы было ясно, формат таблицы в Flask выглядит так:

items = [{'item 1': "Name", 'item 2': "Name"}, {'item 1': "Name2", 'item 2': "Name2"}]

и отображается на странице html следующим образом:

            {% for row in items %}
            <tr>
                <td class="item1">{{ row.item1 }}</td>
                <td class="item2">{{ row.item2 }}</td>
            </tr>
            {% endfor %}

И каким-то образом я хотел бы отобразить та же самая переменная "items" в Javascript с использованием страницы html в качестве источника. Мне удалось найти учебные пособия, объясняющие функцию сортировки в Javascript, однако эти учебные пособия предполагают, что таблица уже существует в JS, и я не уверен, как визуализировать ее динамически, как это. Кто-нибудь знает, как бы я go сделал это? Спасибо.

Answer 1

Как уже упоминалось, таблицы данных будут хорошо подходить для вашего внешнего интерфейса, поскольку он автоматически обрабатывает все функции разбивки на страницы, сортировку и поиск.

Вы можете sh посмотреть репозиторий search-generi c -таблицы . Это моя реализация, в которой используется база данных SQLite, но большая часть того, что вы, вероятно, ищете, уже есть.

Шаблоны построены таким образом, что данные в них жестко не закодированы. Многие обучающие программы Flask включают жесткое кодирование заголовков в шаблон <td>Header Name</td>, что не позволяет шаблонам быть общими c.

Если вы не хотите клонировать все репо, вы, вероятно, можете просто скопировать оба шаблона из папки шаблонов, которые включают необходимые ссылки CDN для работы таблиц данных.

Чтобы это работало с вашим кодом, ( обратите внимание, что ниже предполагается, что каждый словарь в вашем списке имеет одинаковые ключи! ) вы можете сделать следующее. Давайте назовем ваш список словарей original_items и сделаем значения уникальными для ясности:

original_items = [{'item 1': "Banana", 'item 2': "Car"}, {'item 1': "Apple", 'item 2': "Bike"}]

Определите функцию, которая превратит это в список OrderedDicts. Это сохранит предсказуемый порядок столбцов в таблице:

import collections
def sort_dict(d):    
    return collections.OrderedDict(sorted(d.items()))

ods = [sort_dict(d) for d in original_items]

Теперь превратите их в список списков:

table_items = [ list(v for _,v in od.items()) for od in ods]

table_items теперь список списков, который выглядит например:

[['Banana', 'Car'], ['Apple', 'Bike']]

Затем получите заголовки из первого словаря в списке ods:

headers = [k for k,_ in ods[0].items()]

headers теперь выглядит так:

['item 1', 'item 2']

Таким образом, передача их в шаблон становится такой же простой, как функция просмотра, которая выглядит так:

@app.route('/all')
def all():
    return render_template('index.html', headers=headers, objects=table_items)

Это прекрасно отображается в браузере:

Если вы хотите изменить порядок столбцов слева направо, таблицы данных предоставляют удобный способ сделать это изначально без необходимости изменять код Python.