如何在htmx中动态递增页码实现无限表格加载？

方法1：服务端直接生成下一页请求（最省心） #

不用折腾前端逻辑，服务端处理请求时，直接根据当前的page参数算出下一页页码（next_page = page + 1），然后在返回的表格最后一行里，把hx-get直接写成/new?limit=10&page={next_page}。

举个Golang示例（以gin框架为例）：

func handleNew(c *gin.Context) {
    page, _ := strconv.Atoi(c.Query("page"))
    limit, _ := strconv.Atoi(c.Query("limit"))
    
    // 执行数据查询，获取当前页内容
    data := fetchPageData(page, limit)
    
    // 渲染模板时传入下一页参数
    c.HTML(http.StatusOK, "table_rows.tmpl", gin.H{
        "data": data,
        "nextPage": page + 1,
        "limit": limit,
    })
}

模板里的加载行写法：

<tr hx-get="/new?limit={{.limit}}&page={{.nextPage}}" hx-trigger="revealed" hx-swap="afterend">
    <td colspan="你的表格列数">加载更多...</td>
</tr>

用户每加载一页，新返回的最后一行会自动带好下一页的页码，全程无状态，服务端不用存会话数据，前端也不用额外处理。

方法2：前端用HTMX属性+JS动态计算页码 #

如果不想让服务端生成下一页链接，可以在前端用data-*属性存当前页码，结合hx-vals的JS表达式递增：

1. 初始加载行：

<tr hx-get="/new" hx-vals='{"limit": 10, "page": parseInt(this.dataset.page) + 1}' 
    data-page="1" hx-trigger="revealed" hx-swap="afterend">
    <td colspan="N">加载更多...</td>
</tr>

2. 监听HTMX加载完成事件，更新页码属性：

document.body.addEventListener('hx:afterSwap', function(event) {
    const loadRow = event.target.querySelector('[hx-get="/new"]');
    if (loadRow) {
        const currentPage = parseInt(loadRow.dataset.page);
        loadRow.dataset.page = currentPage + 1;
    }
});

每次加载后，data-page自动加1，下次触发请求时就会传递新的页码。

方法3：用隐藏输入框存储当前页码 #

在页面中添加隐藏输入框：

<input type="hidden" id="current-page" value="1">

加载行写法：

<tr hx-get="/new?limit=10" hx-include="#current-page" 
    hx-trigger="revealed" hx-swap="afterend">
    <td colspan="N">加载更多...</td>
</tr>

同样监听hx:afterSwap事件更新输入框值：

document.body.addEventListener('hx:afterSwap', function() {
    const pageInput = document.getElementById('current-page');
    pageInput.value = parseInt(pageInput.value) + 1;
});

原理和方法2一致，只是把页码存储在输入框中而非元素属性。

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