Menampilkan data dalam labu html

Question

Merender tabel dengan data dalam template Flask adalah tugas yang relatif sederhana jika tabelnya pendek, tetapi bisa sangat sulit untuk tabel yang lebih besar yang memerlukan fitur seperti pengurutan, penomoran halaman, dan pencarian. Pada artikel ini saya akan menunjukkan kepada Anda bagaimana mengintegrasikan dataTables. js di templat Anda, yang memungkinkan Anda membuat tabel berfitur lengkap dengan mudah

Table of Contents Show

Cara Mendapatkan Kode
Cara Merender Tabel di Flask
Menjalankan Tabel Bootstrap
Menambahkan tabel data. js
Tabel Dasar
Menjalankan Tabel Dasar
Menambahkan Sumber Data Ajax
Menjalankan Tabel Ajax
Tabel Berbasis Server
Paginasi Sisi Server
Pencarian Sisi Server
Penyortiran Sisi Server
Menjalankan Tabel Berbasis Server
Bagaimana cara mendapatkan data dari Flask ke HTML?
Bagaimana cara menampilkan data dari database dalam HTML menggunakan Python?
Bagaimana cara menampilkan data MongoDB di halaman HTML menggunakan Flask?
Bagaimana cara menampilkan file CSV di HTML Flask?

Cara Mendapatkan Kode

Semua kode yang disajikan dalam artikel ini berasal dari repositori flask-tables saya di GitHub. Saya hanya akan menampilkan cuplikan yang menarik di sini, jadi jika Anda berniat menjalankan kode secara lokal, Anda harus mengkloning repositori ini, membuat lingkungan virtual, dan menginstal persyaratan. file txt di dalamnya

Memperbarui. Saya sekarang telah merilis pembaruan untuk artikel ini, termasuk dukungan untuk mengedit sel tabel. Lihat disini

Cara Merender Tabel di Flask

Saya akan mulai dari awal, jadi langkah pertama adalah membuat aplikasi Flask kecil yang merender tabel biasa

Tabel tersebut akan berisi informasi tentang pengguna. Berikut adalah model SQLAlchemy yang akan saya gunakan untuk database

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64), index=True)
    age = db.Column(db.Integer, index=True)
    address = db.Column(db.String(256))
    phone = db.Column(db.String(20))
    email = db.Column(db.String(120), index=True)

Aplikasi akan memiliki satu rute, yang meneruskan kueri dengan semua pengguna yang disimpan dalam database ke template Jinja untuk dirender

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_

Nama templatnya adalah bootstrap_table. html karena saya akan menggunakan framework Bootstrap CSS untuk menyediakan penataan tabel dasar. Ini sepenuhnya opsional, tetapi dalam kasus saya ini masuk akal karena saya menggunakan Bootstrap di sebagian besar proyek saya, dan saya ingin tabel saya memiliki tampilan yang konsisten dengan halaman lainnya.

Ini adalah bootstrap_table. templat html

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

Saya harap Anda setuju bahwa tidak banyak yang terjadi dalam template ini. Elemen

python create_fake_users.py 5

_4 dibuat dengan dua bagian. header (di dalam

python create_fake_users.py 5

_5 elemen) dan body (di dalam

python create_fake_users.py 5

6). Konten di kedua bagian adalah deretan data, baik header tabel atau pengguna sebenarnya. Badan tabel dibuat dengan for-loop Jinja yang mengulang objek kueri yang diteruskan sebagai argumen dalam panggilan

python create_fake_users.py 5

7

Dari melihat baris pertama di template, Anda tahu bahwa saya menggunakan pewarisan template. Ini karena saya ingin agar pelat cetak halaman tidak memperumit file template. Dasar. html dari mana bootstrap_table. html mewarisi dari disalin di bawah ini

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    {% block scripts %}{% endblock %}
  </body>
</html>

Templat dasar ini menyertakan file CSS Bootstrap dari CDN, menerima argumen

python create_fake_users.py 5

8 yang disisipkan di bagian

python create_fake_users.py 5

9 dan sebagai elemen

python bootstrap_table.py

0 di bagian atas halaman, dan membuat dua blok

python bootstrap_table.py

1 dan

python bootstrap_table.py

2 untuk digunakan oleh templat turunan

Menjalankan Tabel Bootstrap

Untuk dapat menguji aplikasi, saya perlu membuat beberapa konten acak untuk tabel database, The create_fake_users. skrip py yang ditunjukkan di bawah mencapai itu

import random
import sys
from faker import Faker
from bootstrap_table import db, User


def create_fake_users(n):
    """Generate fake users."""
    faker = Faker()
    for i in range(n):
        user = User(name=faker.name(),
                    age=random.randint(20, 80),
                    address=faker.address().replace('\n', ', '),
                    phone=faker.phone_number(),
                    email=faker.email())
        db.session.add(user)
    db.session.commit()
    print(f'Added {n} fake users to the database.')


if __name__ == '__main__':
    if len(sys.argv) <= 1:
        print('Pass the number of users you want to create as an argument.')
        sys.exit(1)
    create_fake_users(int(sys.argv[1]))

Skrip ini menggunakan paket Faker untuk menghasilkan informasi palsu (namun realistis).

Trik kecil menarik yang saya gunakan di sini adalah "mencuri" objek

python bootstrap_table.py

3 dan model

python bootstrap_table.py

4 dari aplikasi Flask. Ini benar-benar berfungsi dengan baik dan menghilangkan kebutuhan untuk menduplikasi database dan definisi model untuk digunakan di luar aplikasi Flask

Jika Anda telah mengkloning repositori flask-tables dan menyiapkan lingkungan virtual dengan semua dependensi, Anda sekarang dapat membuat database dengan beberapa pengguna acak dengan perintah berikut

python create_fake_users.py 5

Dan kemudian Anda dapat menjalankan aplikasi tabel Bootstrap

python bootstrap_table.py

Jika Anda menavigasi ke http. // localhost. 5000 di browser web Anda, Anda akan melihat tabel yang bagus dengan lima baris

Menambahkan tabel data. js

Meskipun tabel di atas terlihat bagus, hanya praktis untuk menggunakannya jika jumlah barisnya sangat sedikit. Secara umum Anda akan menemukan bahwa pengguna mengharapkan tabel yang lebih besar memiliki fitur interaktif, seperti paginasi, pencarian dan pengurutan, dan tabel Bootstrap tidak memiliki semua itu.

Jadi di sinilah tempat dataTables. perpustakaan js memasuki gambar. Pustaka ini berjalan di browser dan dilampirkan ke elemen

python create_fake_users.py 5

4 untuk menyempurnakannya

Sebelum saya tunjukkan cara menerapkan dataTables. js ke tabel Bootstrap di atas, pustaka harus disertakan di basis. html, sehingga tersedia untuk digunakan. Di bawah ini Anda dapat menemukan template dasar yang diperbarui yang mencakup dataTables. js

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

Di bagian

python create_fake_users.py 5

_9 saya telah menambahkan dataTables. bootstrap5. lembar gaya css. Tabel data. Pustaka js menyediakan gaya yang kompatibel dengan beberapa kerangka kerja CSS, jadi Anda harus menggunakan file CSS yang benar di sini. Untuk Bootstrap, ada style untuk versi 3, 4 dan 5. Jika Anda tidak menggunakan Bootstrap, Bootstrap juga menyediakan gaya untuk tabel yang dibuat dengan Foundation, jQuery UI, Bulma, dan beberapa kerangka kerja CSS lainnya. Jika Anda tidak menggunakan kerangka kerja CSS apa pun, itu juga menyediakan satu set gaya mandiri

Di bagian bawah elemen

python bootstrap_table.py

_7 saya telah menambahkan beberapa skrip. Pertama ada perpustakaan jQuery, yang merupakan ketergantungan yang diperlukan dari dataTables. js. Berikutnya adalah inti dataTables. js, yang disebut jquery. tabel data. js. Skrip ketiga dan terakhir disebut dataTables. bootstrap5. js, dan memberikan logika khusus yang berlaku untuk integrasi Bootstrap 5 pilihan saya. Jika Anda menggunakan kerangka gaya yang berbeda, Anda perlu mengubah skrip terakhir ini

Di bagian paling akhir dari badan, templat dasar menyimpan blok

python bootstrap_table.py

2, disertakan di sana untuk memberikan kesempatan kepada templat turunan untuk menambahkan skrip mereka sendiri. Ini akan menjadi bagaimana templat dapat menginisialisasi dan mengonfigurasi tabel data. perpustakaan js

Tabel Dasar

Dalam implementasinya yang paling dasar, semua yang diperlukan untuk menyempurnakan tabel adalah memanggil fungsi

python bootstrap_table.py

9 di atasnya. Menggunakan contoh tabel Bootstrap sebagai titik awal, satu-satunya perubahan yang perlu dilakukan adalah menambahkan skrip pendek di template untuk memanggil fungsi ini

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

Fungsi

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

_0 berasal dari jQuery dan digunakan untuk memberi tahu browser untuk menjalankan fungsi yang diteruskan sebagai argumen setelah halaman selesai dimuat. Ekspresi

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

_1 adalah pemilih jQuery yang mengambil elemen dengan atribut

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

2 yang disetel ke

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

3, dengan kata lain, tabel yang dirender dalam template Jinja. Fungsi

python bootstrap_table.py

_9 dari dataTables. js memodifikasi tabel ini pada tempatnya, seperti yang akan Anda lihat sebentar lagi

Menjalankan Tabel Dasar

Sebelum Anda mencoba contoh ini, sebaiknya tambahkan beberapa pengguna lagi ke database. Mari kita tambahkan 100 lagi

python create_fake_users.py 100

Seharusnya sekarang ada 105 pengguna dalam database, yang merupakan ukuran yang bagus untuk mengalami fitur pagination. Jika Anda memiliki kloning repositori flask-tables, contoh ini disebut basic_table. py dan Anda dapat memulainya sebagai berikut

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_0

Jika Anda sekarang menavigasi ke http. // localhost. 5000 di browser Anda, Anda akan melihat tabel yang jauh lebih bagus

Tabel ini mengimplementasikan semua fitur yang Anda harapkan, termasuk penomoran halaman (pojok kanan bawah tabel), pencarian (kanan atas), dan pengurutan (tajuk tabel). Selain itu, di kiri atas ada dropdown di mana Anda dapat memilih berapa banyak baris yang ditampilkan per halaman, dan di pojok kiri bawah Anda dapat melihat rentang baris yang sedang ditampilkan, dan berapa banyak baris yang ada di . Ini semua dikelola oleh dataTables. js, tanpa harus melakukan pekerjaan tambahan selain merender tabel

Fungsi

python bootstrap_table.py

_9 menerima objek opsi yang dapat digunakan aplikasi untuk menyesuaikan cara peningkatan tabel. Jumlah opsi yang tersedia mencakup berbagai penyesuaian

Untuk mendemonstrasikan cara kerja penyesuaian ini, saya akan mengubah cara kerja penyortiran dan pencarian menggunakan opsi

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

6

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_1

Opsi

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

_6 menerima array sub-opsi untuk setiap kolom dalam tabel. Untuk kolom yang tidak memerlukan penyesuaian, nilai

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

8 diberikan. Saya telah membuat dua penyesuaian, pertama saya menyetel opsi kolom

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

9 ke

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

0 untuk kolom Umur, Alamat, dan Nomor Telepon. Ini akan menghapus kolom ini saat perpustakaan mencari kecocokan dengan string pencarian yang diberikan di kotak pencarian. Perubahan kedua adalah menyetel opsi

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

_1 ke

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

0 untuk kolom Alamat dan Nomor Telepon, yang menghapus tajuk penyortiran yang dapat diklik pada dua kolom ini

Menambahkan Sumber Data Ajax

Anda mungkin bertanya-tanya mengapa saya menyebut tabel di atas sebagai tabel "dasar", mengingat tabel tersebut memiliki semua fitur yang mungkin Anda inginkan dalam sebuah tabel. Masalah dengan cara menggunakan dataTables ini. js adalah Anda harus merender seluruh tabel ke halaman sebelum pustaka mengambil alih dan menerapkan peningkatannya. Jika tabelnya besar, Jinja mungkin membutuhkan banyak waktu untuk merendernya, dan kemudian browser mungkin menghabiskan lebih banyak waktu untuk mengunduh semua konten HTML itu, dan semua ini akan terjadi saat pengguna menunggu halaman ditampilkan. Untuk tabel panjang, saat halaman selesai dimuat di browser, Anda mungkin melihat tabel asli ditampilkan di halaman sesaat sebelum penyempurnaan diterapkan, hanya karena jumlah baris yang perlu disembunyikan sebagai akibat dari

Meskipun solusi dasar dari bagian sebelumnya cukup sederhana, ini hanya berfungsi untuk tabel yang tidak terlalu panjang. Pendekatan yang lebih baik adalah merender tabel tanpa baris apa pun, lalu minta browser meminta data yang ada di tabel secara asinkron melalui permintaan terpisah

Ini jelas membutuhkan integrasi yang lebih terlibat, tetapi upayanya masih relatif rendah. Perubahan pertama yang akan saya lakukan adalah memperluas model

python bootstrap_table.py

4 dengan metode

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

4 yang dapat mengembalikan pengguna sebagai kamus Python yang dapat diserialisasikan ke JSON

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_2

Titik akhir utama dalam aplikasi sekarang akan merender tabel kosong, jadi tidak perlu lagi meneruskan kueri pengguna ke template

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_3

Titik akhir kedua perlu ditambahkan untuk data tabel. Endpoint ini akan menampilkan payload JSON dalam format berikut

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_4

Saya telah memutuskan untuk meletakkan titik akhir kedua di URL/api/data. Implementasi titik akhir kedua ini ditunjukkan di bawah ini

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_5

Template yang merender tabel tidak memerlukan for-loop yang merender semua pengguna lagi, tabel sekarang dirender tanpa baris data apa pun

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_6

Dan terakhir, skrip yang melampirkan dataTables. js ke tabel harus meneruskan opsi

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

5 dengan URL titik akhir data, dan setiap kolom memerlukan sub-opsi

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

3 yang menunjukkan kunci mana di setiap kamus elemen yang harus digunakan untuk kolom tersebut

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_7

Menjalankan Tabel Ajax

Dalam repositori flask-tables, solusi ajax yang dijelaskan di atas didefinisikan dalam ajax_table. py dan template/ajax_table. file html. Anda dapat menjalankan versi tabel ini sebagai berikut

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_8

Seperti sebelumnya, Anda dapat melihat tabel dengan membuka http. // localhost. 5000 di browser Anda

Tabel Berbasis Server

Tabel ajax lebih baik daripada tabel dasar karena data diunduh di latar belakang, setelah halaman dimuat. Tetapi seperti solusi dasarnya, metode ini memiliki masalah bahwa data diunduh semua dalam satu permintaan, jadi ini masih bukan sesuatu yang dapat Anda gunakan untuk kumpulan tabel yang sangat besar karena data akan memakan waktu terlalu lama untuk diunduh dan tidak ada yang ditampilkan. . Untuk tabel yang sangat besar, datanya bahkan mungkin tidak muat dalam memori browser sekaligus

Solusi sempurna, yang akan berfungsi untuk tabel dengan ukuran apa pun, adalah agar browser mengunduh baris tabel sesuai permintaan, sesuai kebutuhan. Dengan solusi jenis ini, tabel dengan ribuan, atau bahkan jutaan baris akan tetap bekerja dengan kinerja yang baik karena klien hanya akan mengunduh beberapa baris yang diperlukan untuk ditampilkan. Dan saat pengguna menavigasi ke halaman lain, permintaan baru akan mengunduh baris baru yang terlihat

Ini adalah solusi yang bagus, tetapi memiliki kerugian besar. Di tabel dasar dan ajax, tabel data. Pustaka js dapat mengimplementasikan pencarian dan penyortiran sendiri, karena memiliki akses ke seluruh kumpulan data. Jika perpustakaan akan mengunduh data satu halaman pada satu waktu, maka itu tidak akan dapat mengelola filter pencarian atau header penyortiran yang dapat diklik. Solusi ini adalah yang paling sulit untuk diterapkan, karena pencarian dan penyortiran perlu dipindahkan ke server pada titik akhir /api/data

Tabel data. js menyebut metode ini pemrosesan sisi server, karena metode ini meneruskan kontrol pagination, mencari, dan menyortir ke server

Mulai dari solusi ajax, perubahan template untuk mengaktifkan opsi sisi server sebenarnya sangat sederhana. Yang perlu dilakukan hanyalah menambahkan opsi

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

7 ke tabel

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_9

Ketika opsi

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

_8 diaktifkan, perpustakaan akan menonaktifkan pemrosesan datanya sendiri dan sebagai gantinya akan mengirimkan persyaratan paginasi, pencarian, dan pengurutan sebagai argumen string kueri ke titik akhir ajax

Paginasi Sisi Server

Dalam upaya pertama saya memproses sisi server, saya akan menunjukkan kepada Anda bagaimana menerapkan paginasi. Tabel data. js library akan mengirimkan argumen string kueri

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

_9 dan

python create_fake_users.py 100

0 yang menunjukkan rentang baris yang diperlukan

Inilah titik akhir paginasi

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

0

Saya harap ini tidak terlalu sulit untuk diikuti. Titik akhir mengambil argumen

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

_9 dan

python create_fake_users.py 100

0 dari objek permintaan, dan kemudian menerapkannya sebagai filter

python create_fake_users.py 100

3 dan

python create_fake_users.py 100

4 pada objek kueri SQLAlchemy

Respons yang dikirim kembali ke dataTables. js terdiri dari objek JSON dengan empat kunci

<!doctype html>
<html>
  <head>
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.css">
  </head>
  <body>
    <div class="container">
      <h1>{{ title }}</h1>
      <hr>
      {% block content %}{% endblock %}
    </div>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

_3. daftar hasil paginasi. Ini diperoleh dengan menjalankan kueri, setelah dimodifikasi untuk memperhitungkan paginasi

```
python create_fake_users.py 100
```
6. jumlah total baris yang cocok dengan filter pencarian saat ini. Karena pencarian belum diterapkan, saya menyetel variabel
```
python create_fake_users.py 100
```
7 ke
```
python create_fake_users.py 100
```
8 sebelum paginasi diterapkan. Untuk saat ini, ini akan menjadi jumlah total baris dalam tabel

python create_fake_users.py 100

_9. jumlah total baris dalam tabel, tanpa mempertimbangkan filter apa pun. Saya menghitung ini hanya dengan menjalankan

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

00 yang hanya mengembalikan jumlah total baris dalam tabel database

```
@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)
```
_01. nilai buram yang dataTables. js dikirim ke server. Itu harus dikembalikan persis seperti yang dikirim, sehingga klien dapat mencocokkan respons dengan permintaan yang sesuai

Titik akhir ini berfungsi dan dapat digunakan, tetapi karena pencarian dan pengurutan tidak diterapkan, opsi tersebut akan muncul seolah-olah tidak berfungsi

Pencarian Sisi Server

Implementasi untuk pencarian sedikit lebih terlibat. Tabel data. pustaka js akan mengirimkan apa yang diketik pengguna di kotak pencarian dalam argumen string kueri

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

02 (tanda kurung adalah bagian dari nama argumen)

Dalam database relasional, opsi yang baik untuk melakukan pencarian adalah operator

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

03, yang mencari menggunakan pola sederhana. Untungnya ini terintegrasi dengan SQLAlchemy. Jika Anda ingin mencari nama yang dimulai dengan "Chris", kuerinya adalah

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

1

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

04 bertindak sebagai placeholder, jadi kueri ini akan cocok dengan pengguna bernama Chris, Christian, dan Christina. A

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_04 juga dapat ditambahkan di awal

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

2

Sekarang teks di antara tanda persen dapat muncul di mana saja pada nama, sehingga kueri di atas akan mencocokkan pengguna bernama Aaron, Arnold, dan lainnya dengan "ar" di mana saja pada nama mereka

Dalam implementasi dua tabel sebelumnya, pencarian tidak hanya dilakukan di kolom Nama, konfigurasi tabel memiliki kolom Nama dan Email yang dapat dicari. Ini dapat diimplementasikan dalam SQLAlchemy menggunakan operator

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

06

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

_3

Kueri ini dapat ditambahkan ke titik akhir /api/data tepat di atas variabel

python create_fake_users.py 100

7

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

_4

Dengan versi titik akhir ini, variabel

python create_fake_users.py 100

7 akan dihitung setelah pencarian diterapkan, tetapi sebelum paginasi, sehingga akan memberi tahu klien berapa banyak rekaman yang cocok dengan pencarian. Seingat Anda, informasi ini ditampilkan di sudut kiri bawah tabel

Penyortiran Sisi Server

Logika terakhir yang perlu ditambahkan ke titik akhir /api/data adalah penyortiran. Klien akan mengirimkan persyaratan penyortiran dalam argumen string kueri berikut

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_09. indeks kolom untuk diurutkan berdasarkan, berbasis nol

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_10. string

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_11 jika mengurutkan dalam urutan menaik, atau

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

12 jika mengurutkan dalam urutan menurun

Tabel mendukung pengurutan berdasarkan beberapa kolom juga. Sebagai pengguna, Anda dapat memilih kolom pengurutan tambahan dengan mengklik-geser pada header pengurutan. Server menerima kolom tambahan dengan nomor indeks yang meningkat dalam argumen urutan. Misalnya, kolom pengurutan sekunder akan diberikan dalam argumen

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

13 dan

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

14

Klien juga mengirimkan konfigurasi kolom ke server dan ini sebenarnya berguna karena dapat digunakan untuk mengubah indeks kolom menjadi nama kolom. Untuk konfigurasi tabel yang digunakan dalam proyek ini, argumen berikut akan dikirim juga sebagai argumen string kueri

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_15. disetel ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_16

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_17. disetel ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_18

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_19. disetel ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_20

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_21. disetel ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_22

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_23. disetel ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_24

Menggunakan elemen di atas dari string kueri, berikut adalah potongan Python yang menghitung kolom pengurutan pertama

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

5

Logika ini tidak sepele, jadi Anda mungkin perlu membacanya dengan cermat untuk memahami semua yang terjadi. Variabel

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

25 diimpor dari string kueri, lalu digunakan sebagai indeks untuk memasukkan nama kolom ke dalam variabel

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

26

Sama seperti masalah keamanan, saya memastikan bahwa nama kolom adalah salah satu dari tiga kolom yang memiliki rangkaian opsi

{% block scripts %}
  <script>
    $(document).ready(function () {
      $('#data').DataTable();
    });
  </script>
{% endblock %}

1. Jika server menerima nama kolom apa pun yang bukan salah satunya, maka nama tersebut disetel ulang kembali ke

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

16. Ini sebagai tindakan pencegahan, karena bukan ide yang baik untuk mengizinkan klien meminta penyortiran berdasarkan kolom arbitrer tanpa validasi apa pun

Variabel

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

29 kemudian disetel ke nilai boolean

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

30 atau

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

31 sesuai dengan arah penyortiran

Tiga baris terakhir dalam cuplikan mendapatkan kolom yang dipilih dari model

python bootstrap_table.py

4 menggunakan

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

33, dan menerapkan kualifikasi penyortiran

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

34 jika arah menurun diminta. Saat mengurutkan berdasarkan nama menaik, nilai

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

35 di akhir akan menjadi

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

36. Jika diurutkan berdasarkan usia menurun, nilai

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

35 akan menjadi

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

38. Inilah yang dibutuhkan oleh filter

@app.route('/')
def index():
    users = User.query
    return render_template('bootstrap_table.html', title='Bootstrap Table',
                           users=users)

_39 dari SQLAlchemy sebagai argumen

Di bawah ini Anda dapat melihat bagaimana cuplikan penyortiran di atas dimasukkan ke dalam /api/data endpoint. Anda akan melihat bahwa ada sedikit lebih banyak kerumitan yang diperkenalkan oleh while-loop yang berhubungan dengan beberapa kolom pengurutan

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

6

Menjalankan Tabel Berbasis Server

Jika Anda berhasil sampai di sini, Anda dapat memberi selamat kepada diri sendiri, karena ini adalah akhirnya, implementasi tabel yang lebih maju sekarang sudah selesai

Sebelum Anda mencoba ini, sebaiknya tambahkan lebih banyak pengguna ke database, karena penerapan tingkat lanjut ini benar-benar bersinar saat ada banyak data

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

7

Menggunakan repositori flask-tables, Anda dapat menjalankan versi tabel ini sebagai berikut

{% extends "base.html" %}

{% block content %}
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Phone Number</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.address }}</td>
          <td>{{ user.phone }}</td>
          <td>{{ user.email }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}

_8

Dan sekali lagi arahkan ke http. // localhost. 5000 di browser Anda dan hargai betapa bagus dan berkinerjanya meja Anda

Jika Anda ingin menguji penerapan ini, Anda dapat menambahkan pengguna sebanyak yang Anda inginkan ke tabel. Performa solusi ini sekarang didorong oleh seberapa cepat database Anda dapat melakukan kueri yang diperlukan

Kesimpulan

Saya harap artikel ini menyenangkan untuk dibaca seperti saat saya menulisnya

Tabel data. Perpustakaan js memiliki daftar fitur yang luas, banyak di antaranya belum saya bahas, jadi Anda harus membaca dokumentasinya untuk mempelajari semua yang ditawarkan perpustakaan ini

Memperbarui. Saya sekarang telah beralih ke jaringan. js sebagai pustaka tabel favorit saya untuk digunakan dengan Flask. Saya telah menulis artikel tentang itu di sini

Sudahkah Anda menggunakan metode berbeda untuk membuat tabel Anda?

Halo, dan terima kasih telah mengunjungi blog saya. Jika Anda menikmati artikel ini, mohon pertimbangkan untuk mendukung pekerjaan saya di blog ini di Patreon

Bagaimana cara mendapatkan data dari Flask ke HTML?

meminta. membentuk. get(“fname”) akan mendapatkan input dari nilai Input yang memiliki atribut name sebagai fname dan disimpan dalam variabel first_name

meminta. membentuk. get(“lname”) akan mendapatkan input dari nilai Input yang memiliki atribut name sebagai lname dan disimpan dalam variabel last_name

Bagaimana cara menampilkan data dari database dalam HTML menggunakan Python?

impor mysql. konektor impor webbrowser conn = mysql. penyambung. terhubung(user='root', password='', host='localhost',database='company') jika terhubung. cetak ("Berhasil Terhubung") lainnya. print ("Koneksi Tidak Terbentuk") select_employee = """SELECT * FROM employee""" cursor = conn