Question

我正在尝试使用分页创建一个html表。我正在通过$ .get调用使用JQuery请求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();

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

使用分页动态创建HTML表

1 个答案: