使用分页动态创建 HTML 表格答案

【问题标题】：Dynamically Create HTML Table with Pagination使用分页动态创建 HTML 表格
【发布时间】：2018-02-03 05:16:35
【问题描述】：

我正在尝试创建一个带有分页的 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>

【问题讨论】：

你为什么不使用datatables并将JSON数据添加到它并让它自己处理分页
作业规范要求我使用 vanilla Javascript 解决这个问题

标签： javascript jquery html asynchronous pagination

【解决方案1】：

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

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

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

【讨论】：