html怎么实现数据变换

Question

html中,有个上千条数据一个表格,没有序号,怎么实现显示前面20条(1~20条)数据,然后隔一段时间显示后面(21~40条,41~60条)的数据

<table class="table" border="1" width="1800" align="center" cellspacing="0" cellpadding="6">
        <thead>
            <tr align="left">
                <td style="text-align:center"><h3>列1</h3></td>
                <td style="text-align:center"><h3>列2</h3></td>
                <td style="text-align:center"><h3>列3</h3></td>
                <td style="text-align:center"><h3>列4</h3></td>
                <td style="text-align:center"><h3>列5</h3></td>
                <td style="text-align:center"><h3>列6</h3></td>
                <td style="text-align:center"><h3>列7</h3></td>
                <td style="text-align:center"><h3>列8</h3></td>
                <td style="text-align:center"><h3>列9</h3></td>
                <td style="text-align:center"><h3>列10</h3></td>
            </tr>
        </thead>
        <tbody id="container">
            <!--//todo 表格内容使用模板渲染 -->
            <script type="text/x-handlebars-template" id="template">
                {{#each this}}

                <tr align="left"></td>
                    <td style="text-align:center">{{num1}}</td>
                    <td style="text-align:center">{{num2}}</td>
                    <td style="text-align:center">{{num3}}</td>
                    <td style="text-align:center">{{num4}}</td>
                    <td style="text-align:center">{{num5}}</td>
                    <td style="text-align:center">{{num6}}</td>
                    <td style="text-align:center">{{num7}}</td>
                    <td style="text-align:center">{{num8}}</td>
                    <td style="text-align:center">{{num9}}</td>
                    <td style="text-align:center">{{num10}}</td>
                </tr>

                {{/each}}
            </script>
        </tbody>
    </table>

    <script src="js/handlebars.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        var work=
             $.getJSON({
    			type : "GET", 
    		        url : "url",
   			data : { "org.id" : "${org.id}"},
    			success : function(result) {
    		        console.log(result);
        //获取需要放数据的容器
        var container = document.querySelector('#container');
        //也就是获取我们定义的模板的dom对象。主要是想获取里面的内容（innerHTML）
        var templateDom = document.querySelector('#template');
        //编译模板的里的内容
        var template = Handlebars.compile(templateDom.innerHTML);
        //把后台获取到的数据student渲染到页面
        container.innerHTML = template(result);
   																		 }

   							 });

    </script>

谢谢各位大佬,感激不尽

Answer 1

setTimeout(function(){
//这里写渲染页面的代码 可以你前端获取到所有数据之后放到一个容器中 再根据下标去渲染 或者让后端给你做分页发你 你请求后端接口

},3000);

//3000这里是毫秒 3000就是3秒