Как сделать кнопку «Показать больше» с помощью Javascript и Flask For Loop в таблицах ⇐ Python

[Anonymous]

Я создаю приложение для консультации студентов. На вкладке администратора я показываю зарегистрированных студентов через таблицу. Однако я не хочу отображать их всех сразу, потому что это загромождает страницу.
Вот почему я хочу отображать только 5 учеников, а после нажатия «Показать всех» остальные ученики будут отображаться. отображаться в таблице.
Я видел несколько руководств по реализации с помощью javascript, мне удалось реализовать его с помощью простого списка HTML, но когда я пытаюсь использовать его с таблицами, это не происходит. работают должным образом.
Со списками я использовал это решение:
приложение flask:

Код: Выделить всё

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/'])
def home():
array= ['test-1', 'test-2', 'test-3', 'test-4', 'test-5', 'test-6']
return render_template('home.html', array=array)

if __name__ == "__main__":
app.run(debug=True)

HTML:

Код: Выделить всё

...
[list]
{% for item in array[:3] %}
[*]{{ item }}
{% endfor %}

{% for item in lista[3:] %}
[*]
{{ item }}

{% endfor %}

[/list]

Mostrar mais
...

Javascript:

Код: Выделить всё

const buttonShow = document.getElementsByClassName("buttonShow")[0]
const showItens = () => {
document.getElementsByClassName("show")[0].style.display = "inline";
}
buttonShow.addEventListener('click', showItens)

Это работает нормально, я нажимаю кнопку, и отображаются остальные элементы.
Я попробовал это же решение для таблиц html, но результат оказался не таким, как ожидалось, вместо того, чтобы студенты и их информация появлялись в новых строках. Все новые строки появлялись в одной ячейке таблицы.
Это таблица до того, как я нажал кнопку:
введите здесь описание изображения
И это после того, как я нажал кнопку:
введите сюда описание изображения
Решение, которое я пытался использовать для таблиц, было следующим:
Приложение Flask:

Код: Выделить всё

@app.route('/admin')
@login_required
def admin():
alunos = Aluno()
users = User.query.all()
admin = User.query.filter_by(id=current_user.id).first()
if current_user.admin == 1:
return render_template("admin.html", alunos=alunos, reversed=reversed)
else:
flash("You dont have access")
return(redirect(url_for('home')))

Html:

Код: Выделить всё

New Students



Nome
Curso
Idade
Pagamento
Bolsa?




{%for aluno in reversed(alunos.query.all()[-5:])%}


{{aluno.nome}}

{{aluno.curso}}
{{aluno.idade}}

{% for pag in aluno.pagamento %}
{% if pag.pagamento %}
Pago
{% else %}
Não Pago
{% endif %}
{% endfor %}


{% if aluno.bolsa %}
Possui Bolsa
{% else %}
Não Possui
{% endif %}


{%endfor%}


{%for aluno in reversed(alunos.query.all()[0:-5])%}

{{aluno.nome}}

{{aluno.curso}}
{{aluno.idade}}

{% for pag in aluno.pagamento %}
{% if pag.pagamento %}
Pay
{% else %}
not pay
{% endif %}
{% endfor %}


{% if aluno.bolsa %}
Have
{% else %}
Dont Have
{% endif %}

{%endfor%}

Javascript:

Код: Выделить всё

let itemToshow = document.getElementsByClassName("itens-toShow")[0];
let buttonShow = document.getElementsByClassName("mostrar-itens")[0];

const mostrarMaisAlunos = () => {
itemToshow.style.display = 'block';

};

buttonShow.addEventListener('click', mostrarMaisAlunos);

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

Код: Выделить всё

nome    curso     idade pagamento bolsa
aluno1  jiujitsu  23      True      False
aluno2  box       24      True      True
aluno3  academy   24      False     True
aluno4  jiujitsu  25      False     False
aluno5  box       26      True      False

Что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/783 ... -in-tables