烧瓶中带有 htmx 的无限滚动对我不起作用

Question

这是我第一次使用 htmx，我正在尝试使用无限滚动，但它不起作用。这是我下面的代码

@app.route('/home', methods = ['GET'])



def home():
    # pagination
    page = request.args.get('page', 1, type=int)
    all_data = Data.query.order_by(desc(Data.timestamp)).paginate(page = page, per_page = 20)

    if "hx_request"  in request.headers:
        return render_template("table.html",datas = all_data)
    return render_template("home.html", datas = all_data)

这是 html 我试图将无限滚动添加到

的代码

{% for data in datas.items %}
{% if loop.last and data.has_next %}
<tr hx-get="{{url_for('home', page = data.next_num)}}" hx-trigger="revealed" hx-swap="afterend">
{% else %}
    <tr>
  {% endif %} 
     
        <td scope="row">{{data.uuid}}</td>
        <td scope="row">{{data.timestamp}}</td>
        <td scope="row">{{data.decibel}}</td>
        
    </tr>
    
    {% endfor %}

这是我的 home.html，其中包含 table

{% extends 'layout.html' %}
{% block head %}
<title>home</title>
{% endblock %}
{% block body %}
<center>
<table class="table table-primary table-striped" >
    <tr> 
        <th scope="col">UUID</th>
        <th scope="col">Timestamp</th>
        <th scope="col">Decibel</th>
    </tr>
   <tbody>
    {% include 'table.html' %}


</tbody>


</table>
</center>
{% endblock %}

我在这里和那里更新了一些东西，但它仍然不起作用

Answer 1

下面的示例向您展示了一种使用 htmx 无限滚动的不太好的方法。这与您的方法非常相似。

from flask import (
    Flask,
    render_template,
    request
)
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
db = SQLAlchemy(app)

class Record(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String, unique=True, nullable=False)

with app.app_context():
    db.drop_all()
    db.create_all()
    items = [Record(name=f'Record-{i}') for i in range(100)]
    db.session.add_all(items)
    db.session.commit()

@app.route('/')
def index():
    page = request.args.get('page', 1, type=int)
    records = Record.query.paginate(page=page, per_page=20)
    return render_template('index.html', **locals())

定义了一个宏，它使用分页对象为加载块的每一最后一行添加 htmx 模式，只要有另一页。

macro 遍历加载页面的元素，为每个条目返回一个 table 行。如果还有另一页，则将无限滚动模式所需的属性添加到最后一行。
为了使宏也可用于其他数据记录，使用 caller() 将当前对象发送回迭代内的调用。这使得它可用作调用的嵌套块中的参数。另请参阅文档中的 call 部分以获得更详细的解释。

{% macro htmx_infinite_table_rows(paginate, endpoint) -%}
  {% for item in paginate.items -%}
    {% if loop.last and paginate.has_next -%}
    <tr
      hx-get="{{ url_for(endpoint, page=paginate.next_num) }}"
      hx-trigger="revealed"
      hx-swap="afterend"
    >
    {% else -%}
    <tr>
    {% endif -%}
      {{ caller(item) }}
    </tr>
  {% endfor -%}
{% endmacro -%}

{% if 'hx_request' in request.headers -%}
  {% call(record) htmx_infinite_table_rows(records, 'index') -%}
    <td>{{ record.name }}</td>
  {% endcall -%}
{% else -%}
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .htmx-indicator {
          display:none;
        }
        .htmx-indicator.htmx-request {
          display:inline;
        }
      </style>
    </head>
    <body>
      <table>
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {% call(record) htmx_infinite_table_rows(records, 'index') -%}
            <td>{{ record.name }}</td>
          {% endcall -%}
        </tbody>
      </table>
      <center><img class="htmx-indicator" width="60" src="https://htmx.org/img/bars.svg"></center>
      
      <script 
        src="https://unpkg.com/htmx.org@1.7.0" 
        integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" 
        crossorigin="anonymous" 
        defer></script>
    </body>
  </html>
{% endif -%}

更新：

您在获取属性 has_next 和 next_num 时出错。代码应该如下。

{% for data in datas.items %}
  {% if loop.last and datas.has_next %}
  <tr hx-get="{{url_for('home', page=datas.next_num)}}" hx-trigger="revealed" hx-swap="afterend">
  {% else %}
  <tr>
  {% endif %}
    <td scope="row">{{data.uuid}}</td>
    <td scope="row">{{data.timestamp}}</td>
    <td scope="row">{{data.decibel}}</td>
  </tr>
{% endfor %}

烧瓶中带有 htmx 的无限滚动对我不起作用

Infinite scroll with htmx in flask is not working for me

html

flask

flask-sqlalchemy

flask-restful

htmx

更新：