A_Fann
2021-04-14 15:46
采纳率: 95.2%
浏览 60
已采纳

html怎么实现数据变换

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>

谢谢各位大佬,感激不尽

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 阿呆呆1 2021-04-14 16:06
    已采纳
    setTimeout(function(){
    //这里写渲染页面的代码 可以你前端获取到所有数据之后放到一个容器中 再根据下标去渲染 或者让后端给你做分页发你 你请求后端接口
    
    },3000);

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

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 这个是正常的分页处理,每页显示20条记录,然后定义一个定时器,可以使用setInterval方法调用

    评论
    解决 无用
    打赏 举报
  • 流光Wyatt 2021-04-14 15:47

    加个定时器,过一段时间自动读数据然后渲染不就行了

    评论
    解决 无用
    打赏 举报
  • Lazy33 2021-04-14 16:12

    又是你。。

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题