同一个table下的tr进行分页打印

开始尝试用css的page-break-after 属性 实现对tr  的分页 打印效果,结果发现 该属性对 table 不起作用, 

然后换了一种方法,方法的思路大概描述下

          1 、 先找到 要进行打印的tbody 然后 利用tbody 得到在其内的 tr数组。

           2 、利用循环, 每打印一页 ,就 删除打印过的tr (我这里是每6个tr是一页,所以每次删6行)

           3、利用  LODOP.NewPage() 来创建新页。代码如下

        var trs = tbodys.getElementsByClassName('sz-prst-table-row');
        var length = trs.length;    // tr的length 要取一个定值。

        for(var i = 0; i< length; i+=6){ 
             var labelHtml = doc.getElementsByTagName("html")[0].innerHTML;
             LODOP.NewPage();    // 创建新页
             LODOP.ADD_PRINT_HTM("0", "0", "100%", "101%",labelHtml);  //设置新页的内容
             tbodys.removeChild(trs[0]);tbodys.removeChild(trs[0]);     //删除打印过的 tr
             tbodys.removeChild(trs[0]);tbodys.removeChild(trs[0]);
             tbodys.removeChild(trs[0]);tbodys.removeChild(trs[0]);
         } 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用Vue写的分页table页的示例代码: ```html <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="user in displayedUsers" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <div class="pagination"> <button :disabled="currentPage === 1" @click="prevPage">Prev</button> <span>{{ currentPage }} / {{ totalPages }}</span> <button :disabled="currentPage === totalPages" @click="nextPage">Next</button> </div> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: "John", email: "john@example.com" }, { id: 2, name: "Jane", email: "jane@example.com" }, { id: 3, name: "Bob", email: "bob@example.com" }, { id: 4, name: "Alice", email: "alice@example.com" }, { id: 5, name: "Tom", email: "tom@example.com" }, { id: 6, name: "Lucy", email: "lucy@example.com" }, { id: 7, name: "Mike", email: "mike@example.com" }, { id: 8, name: "Mary", email: "mary@example.com" }, { id: 9, name: "David", email: "david@example.com" }, { id: 10, name: "Lisa", email: "lisa@example.com" } ], itemsPerPage: 3, currentPage: 1 }; }, computed: { displayedUsers() { const startIndex = (this.currentPage - 1) * this.itemsPerPage; const endIndex = startIndex + this.itemsPerPage; return this.users.slice(startIndex, endIndex); }, totalPages() { return Math.ceil(this.users.length / this.itemsPerPage); } }, methods: { prevPage() { this.currentPage -= 1; }, nextPage() { this.currentPage += 1; } } }; </script> ``` 该示例代码中,使用了一个 `users` 数组来存储所有的用户数据,每页显示 `itemsPerPage` 条数据,当前页数为 `currentPage`。在 `displayedUsers` 计算属性中,根据当前页数和每页显示条数计算出应该显示的数据。在 `totalPages` 计算属性中,根据用户数据总数和每页显示条数计算出总页数。在 `prevPage` 和 `nextPage` 方法中,分别更新当前页数,以实现翻页功能。最终将用户数据和分页组件渲染到页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值