javascript - 动态创建带分页的 HTML 表格

Question

我正在尝试创建一个带分页的 html 表。我正在使用 JQuery 通过 $.get 调用请求 JSON 数据，这是一个异步调用。我当前的解决方案每当选择新页面时就会重复 HTML 代码。我知道这是一种异步性，但我不确定克服这个问题的最佳方法是什么。

<script type="text/javascript">
    function generateTable(currentPage) {
        this.URL = "https://jsonplaceholder.typicode.com/posts";
        $.getJSON(URL, function(data) { 
            const pages = Math.ceil(data.length / 10); 

            for(let i = currentPage*10; i<(currentPage*10)+10; i++ ) {
                let post = data[i]; 
                let tblRow = "<tr>" + "<td>" + post.userId + "</td>" + "<td>" + post.id + "</td>" + "<td>" + post.title + "</td>" + "<td>" + post.body + "</td>" + "</tr>"
                $(tblRow).appendTo("#jsonData tbody");
            }
            for (let i = 1; i <= pages; i++) {
                let pagingHtml = "<a href=# onclick=generateTable("+(i-1)+")>"+" "+i+" "+"</a>" 
                $(pagingHtml).appendTo("#paging"); 
            }
        })
    }
    generateTable(0); 

</script>

Answer 1

在填充 HTML 之前，请清除页面中的当前行:

$("#jsonData tbody,#paging").empty();

这假设这两个父元素仅具有动态内容。如果没有，您应该引用仅具有动态内容的容器元素(因此没有页眉、页脚等)。