填充表格时无法显示htmx-indicator的问题求助

1. 缺少.htmx-indicator元素 #

你的代码里没有定义.htmx-indicator元素，HTMX找不到目标元素自然无法显示加载状态。需要在DOM中添加这个元素，推荐放在表格的<tbody>末尾或者表格下方：

示例：在tbody中添加加载行指示器 #

<tbody>
        <!-- 初始触发加载的行 -->
        <tr 
            hx-get="/new?p=2&l=100"
            hx-trigger="revealed"
            hx-swap="afterend"
            hx-indicator=".htmx-indicator"
        >
            <td scope="row">-- { data.Field1 }</td>
            <td scope="row">-- { data.Field2 }</td>
            <td scope="row">-- { data.Field3 }</td>
        </tr>
        <!-- 添加加载指示器 -->
        <tr class="htmx-indicator d-none">
            <td colspan="3" class="text-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
            </td>
        </tr>
</tbody>

2. 配置指示器的显示CSS #

HTMX会在请求发起时给指示器元素添加htmx-request类，你需要确保这个类能覆盖默认的隐藏样式：

/* 自定义CSS，放在<style>标签或样式文件中 */
.htmx-indicator.htmx-request {
    display: table-row !important; /* 针对表格行指示器的显示规则 */
}
/* 适配Bootstrap的d-none类 */
.htmx-request.htmx-indicator.d-none {
    display: table-row !important;
}

如果把指示器放在表格外的容器：

<div class="htmx-indicator d-none text-center mt-3">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>

对应的CSS调整为：

.htmx-indicator.htmx-request.d-none {
    display: block !important;
}

3. 优化HTMX属性配置（可选） #

可以把hx-indicator属性移到<tbody>标签上，让所有加载请求复用同一个指示器，避免重复配置：

<tbody hx-indicator=".htmx-indicator">
    <!-- 触发加载的行 -->
    <tr 
        hx-get="/new?p=2&l=100"
        hx-trigger="revealed"
        hx-swap="afterend"
    >
        <!-- 行内容 -->
    </tr>
    <!-- 指示器行 -->
    <tr class="htmx-indicator d-none">
        <!-- 加载内容 -->
    </tr>
</tbody>

4. 验证触发逻辑 #

确保revealed触发器能正常触发：

• 检查初始触发行是否能被滚动到视口内（如果初始数据过多，该行可能在页面外，滚动后才会触发请求）
• 打开浏览器开发者工具的Network标签，确认触发行进入视口时HTMX是否发起了请求

内容的提问来源于stack exchange，提问作者farhany