bootstrap表格分页符_9.6 分页预览视图设置打印

在Excel2019中,【分页预览】视图帮助用户直观查看打印区域和分页设置。用户可调整蓝色粗实线框内的打印区域,通过拖动分页线改变页面布局。此外,还能插入或删除分页符,快速调整工作表的打印方式。在【分页预览】下,非打印区域以灰色显示,而蓝色虚线指示自动分页位置。通过右键菜单,用户可以重置所有分页符,实现打印区域的灵活配置。
摘要由CSDN通过智能技术生成

在Excel2019中,用户可以使用【分页预览】视图来方便查看打印区域以及分页设置,在【分页预览】视图中,被蓝色粗实线框所围起来的白色表格区域是打印区域,而实线外的灰色区域为非打印区域,蓝色虚线为自动产生的分页线, 如图 9‑30所示。

3aab6017ad17a326e98ae22d81a321b9.png
图 9-30 分页预览视图

9.6.1 分页符设置

【分页预览】视图中,Excel会自动在工作表的底纹显示第几页的水印,用户可对自动产生的分页线位置进行调整,将鼠标移至分页线的上方,当鼠标指针显示为黑色双向箭头时,按住鼠标左键拖动,移置需分页位置,此时原自动产生的虚线分页线会变成蓝色粗实线,并且分页的水印字样会自动调整,如图 9‑31所示。

ea614845f80ec76a2b77311125e886f0.png
图 9-31 拖动调整分页线

除了手动调整分页符位置以外,还可以在打印区域中插入新的分页符,如图 9‑32所示。

be0350488bd14e2da05356d0b9c514db.png
图 9-32 插入分页符

用户若想删除所有人工分页符,可在【分页预览】视图中的任意单元格按鼠标右键,在弹出的菜单中选择【重设所有分页符】。

9.6.2 调整打印区域

在【分页预览】视图下,用户可以拖动蓝色边框快速设置打印区域,蓝色粗实线框所围起来的白色表格区域是打印区域,而实线外的灰色区域为非打印区域,如图 9‑33所示。

3dd01638228cd9719a67781b22ff9dfa.png
图 9-33 在【分页预览】视图下设置打印区域
要在 Bootstrap 表格中添加分页,可以使用 Bootstrap分页组件和 jQuery 插件 DataTables。 首先,你需要在页面中引入 Bootstrap 和 jQuery 库以及 DataTables 插件的 CSS 和 JavaScript 文件。可以通过下面的代码来实现: ```html <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.16/css/dataTables.bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.bootcss.com/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script> ``` 然后,在 HTML 中添加一个表格和一个分页组件,如下所示: ```html <table id="example" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>22</td> </tr> <tr> <td>王五</td> <td>男</td> <td>25</td> </tr> </tbody> </table> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> ``` 接下来,使用 DataTables 插件来初始化表格分页组件,如下所示: ```javascript $(document).ready(function() { $('#example').DataTable(); }); ``` 这样就可以在 Bootstrap 表格中添加分页了。如果你想调整分页组件的样式或者修改每一页显示的数据量,可以查看 DataTables 插件的文档进行设置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值