开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现打印table分页

要在JavaScript中实现打印表格的分页功能，可以按照以下步骤进行：

基本概念

分页：将大量数据分成多个页面显示，以提高用户体验和页面加载速度。
打印：将网页内容输出到打印机进行纸质打印。

优势

用户体验：分页可以减少单页数据量，提高页面加载速度和用户浏览效率。
打印友好：分页打印可以使打印内容更加整齐，避免内容过多导致页面混乱。

实现步骤

HTML结构：创建一个包含表格的HTML结构。
CSS样式：使用CSS控制表格的显示和打印样式。
JavaScript逻辑：编写JavaScript代码实现分页和打印功能。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Pagination and Print</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="table-container">
        <table id="myTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <!-- 示例数据 -->
                <tr><td>1</td><td>Alice</td><td>25</td></tr>
                <tr><td>2</td><td>Bob</td><td>30</td></tr>
                <!-- 更多数据 -->
            </tbody>
        </table>
    </div>
    <button onclick="printTable()">Print Table</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* 打印样式 */
@media print {
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
    }
    .page-break {
        page-break-after: always;
    }
}

JavaScript (script.js)

function printTable() {
    const table = document.getElementById('myTable');
    const rows = table.rows;
    const pageSize = 10; // 每页显示的行数
    let currentPage = 1;

    // 隐藏所有行
    for (let i = 1; i < rows.length; i++) {
        rows[i].style.display = 'none';
    }

    // 显示当前页的行
    for (let i = 1; i <= pageSize && i < rows.length; i++) {
        rows[i].style.display = '';
    }

    // 打印当前页
    window.print();

    // 恢复所有行的显示
    for (let i = 1; i < rows.length; i++) {
        rows[i].style.display = '';
    }

    // 如果需要分页打印，可以使用以下逻辑
    /*
    for (let i = 1; i < rows.length; i += pageSize) {
        for (let j = 1; j <= pageSize && j < rows.length; j++) {
            rows[i + j - 1].style.display = (j <= pageSize) ? '' : 'none';
        }
        window.print();
        for (let j = 1; j <= pageSize && j < rows.length; j++) {
            rows[i + j - 1].style.display = '';
        }
    }
    */
}

解释

HTML：创建一个包含表格的简单页面。
CSS：定义打印样式，确保表格在打印时显示正确。
JavaScript：
- printTable函数首先隐藏所有行，然后显示当前页的行。
- 调用window.print()进行打印。
- 打印完成后恢复所有行的显示。

注意事项

分页打印的逻辑可以根据实际需求进行调整，例如动态计算总页数、处理页眉页脚等。
打印样式可以根据具体需求进行自定义，以确保打印效果符合预期。

通过以上步骤和代码示例，可以实现一个简单的表格分页打印功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...在样式中有规定几个打印的样式 page-break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。...每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。...page-break-before 若设定成 always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。...如果必要则在元素前插入分页符 always 在元素前插入分页符 avoid 避免在元素前插入分页符 left 在元素之前足够的分页符，一直到一张空白的左页为止 right 在元素之前足够的分页符，一直到一张空白的右页为止

14.2K2 1

bootstrap-table插件实现分页(服务端分页)

文章目录前言：前端html部分 js部分后端实现效果前言：本文为服务端分页，想看客户端分页请点击这里: https://blog.csdn.net/qq_43753724/article...spm=1001.2014.3001.5501 前端html部分 table-responsive..."> table id="table" class="table" data-click-to-select="true"> table...> js部分 $(function () { var $table=$('#table'); $table.bootstrapTable...productInfo.priceTo}"); } } } }.toString(); } } 实现效果

1.9K2 0

JS实现分页功能

分页在网页上是一个很常见的功能，今天我们来实现一个新闻列表，包含了分页的功能，效果如下：那么如何来实现这个功能呢？...--分页容器--> 上一页...document.querySelector('.new-main');//新闻容器 let pagination = document.querySelector('.pagination');//分页容器...=asAll.length){ return; } p=p+1; changePageClass(); render(); } 到此为止，一个传统的分页功能就实现了...，如有更好的实现方式，欢迎交流。

16.1K2 0

js分页功能实现

实现一个js的分页并在弹出框中显示 1.分页插件使用：bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等； !...numberOfPages : 0, bootstrapMajorVersion:3 } 其中 bootstrapMajorVersion的值需要根据实际情况配置； 3、列表展示实现...'; $('.page-footer').html(page); $('#pageSize').val(pagination.number); //分页需要

4.6K1 0

layui table样式_layui table 分页

table的结构： table lay-filter=”userlist-table” style=”display: none;”> 使用layui渲染table layui.use([‘common’,’table’,’jquery’], function(){ var common = layui.common; ...var table = layui.table; var $=layui.$; var data={ table :{ id:’userlist-table’, options...page一体的js插件。...table :{ id:’userlist-table’, options:{ done: function(res, curr, count){ //如果是异步请求数据方式，res即为你接口返回的信息

1.7K1 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生JS...实现分页效果 a { margin: 5px; }

12.4K1 0

Bootstrap Table 后端分页

之前一直用的前端分页，在数据不是太多的情况下，前端分页还是很方便的，也可以使用自带的搜索等功能，如果数据量比较多的情况就要使用后端分页。...实现的原理：前端把offset和limit(每一页显示的数量)发送给后端，后端查询数据库返回JSON，前端根据后端返回的total展示出pagination。...asc","offset":0,"limit":10} return { offset:params.offset, limit:params.limit } } 完整的代码 table...class="table-striped table-hasthead" id="tableTest1"> Texa Country table

2.3K3 0

SpringBoot + Vue + ElementUI 实现 el-table 分页功能详解

本文将详细讲解如何使用SpringBoot作为后端，Vue.js和ElementUI作为前端，实现一个带分页功能的数据表格（el-table）。...分页的关键点在实现分页功能时，有几个关键点需要注意：后端实现分页逻辑：后端需要提供分页接口，根据请求参数返回对应页的数据和总条数。...handleCurrentChange(page)：当分页控件的当前页改变时，更新currentPage并重新获取数据。修改 main.js 在main.js中引入ElementUI。...总结通过本文的讲解，我们了解了如何在SpringBoot和Vue.js中实现分页功能。从后端的分页逻辑实现，到前端的分页展示和状态管理，都进行了详细的介绍。...希望本文能够帮助你在项目中实现高效的分页功能。如果有任何问题或建议，欢迎在评论区讨论。

3531 0

网页打印怎样分页

在要分页的地方插入一个div, 其style为如下.PageNext即可 .Noprint{display:none;} .PageNext{page-break-after

1.2K2 0

js或jquery实现页面打印可局部打印

1、js实现（可实现局部打印）代码如下: js打印 javascript打印-打印页面设置-打印预览代码打印吗？'))... 3、jQuery实现（支持局部打印）代码如下: js"> $(function(){ $("input#biuuu_button").click(function(){ $("div#

8K2 0

vue-pdf实现pdf预览、分页、下载、打印

vue-pdf实现pdf预览、分页、下载、打印 vue-pdf-app（功能完整内嵌组件）： https://www.npmjs.com/package/vue-pdf-app vue-pdf使用（参考地址...------------------(分割线）-------------------------------------------------------------------- 1、pdf预览、分页实现...res.data.records[index].url, cMapPacked: true, CMapReaderFactory }) // 计算总页数实现分页展示多页...在项目主文件main.js中引入定义好的实现方法，并注册 import htmlToPdf from '@/components/utils/htmlToPdf...export default { data () { return { htmlTitle: '页面导出PDF文件名' } } } 3、pdf打印功能实现

25.6K15 3

原生JS实现酷炫分页

分享一个如下效果的JS分页特效，是不是很酷炫。以下是代码实现：原生JS...实现酷炫分页 * { margin: 0; padding: 0; }...-- 引入运动函数 --> js/move.js"> window.onload...var timer = setInterval(function () { //执行move.js

3.2K1 0

JS实现打印两方法

要实现点击“打印”按钮以后就将页面打印出来JS中一般有两种方法。...1.用Object实现打印添加对象打印 2.用JS自带函数打印打印其实第一种方法也是第二种方法的复杂实现方法，但是第一种方法提供了更多的预览...，修改打印设置等功能。...推荐使用第二种方法，出于安全的考虑，有些浏览器（比如遨游）会禁用一些Object，所以在遨游中第一种方法会报权限不足的JS错误。

5.3K1 0

利用BootStrap Table插件实现自己的弹出框分页。

2：https://www.cnblogs.com/wlandwl/p/bootstrap_table.html 1、第一步、首先，先将基本数据信息以table分页展示的出来。...（即非弹出框分页的数据，以table分页的方式展示出来）。...：在配置文件中设置分页方式为服务器分页。...> 28 2、第二步、先将基本数据信息以table分页展示的出来，使用的ajax将数据查询出来，在上面所示的table展示出来。...> 25 26 5、第五步、第四步弹出框分页的table使用如下ajax加载出数据。

1.3K3 0

SpringBoot + Vue + ElementUI 实现 el-table 分页功能详解

本文将详细讲解如何使用SpringBoot作为后端，Vue.js和ElementUI作为前端，实现一个带分页功能的数据表格（el-table）。...分页的关键点在实现分页功能时，有几个关键点需要注意：后端实现分页逻辑：后端需要提供分页接口，根据请求参数返回对应页的数据和总条数。前端展示分页数据：前端需要展示分页数据，并提供分页控件让用户切换页面。...handleCurrentChange(page)：当分页控件的当前页改变时，更新currentPage并重新获取数据。修改 main.js在main.js中引入ElementUI。...总结通过本文的讲解，我们了解了如何在SpringBoot和Vue.js中实现分页功能。从后端的分页逻辑实现，到前端的分页展示和状态管理，都进行了详细的介绍。...希望本文能够帮助你在项目中实现高效的分页功能。如果有任何问题或建议，欢迎在评论区讨论。

2040 0

js分页

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="pg"...

5.1K2 0

bootstrap table表格分页样式问题

bootstrap table表格分页样式问题今天项目里用到bootstrap做列表,数据展示没问题但是分页样式一直出不来,找了半天发现是因为少引入css文件的问题 js}"> js}"> table/dist.../bootstrap-table.js}"> table/dist/locale/bootstrap-table-zh-CN.js...}"> js

1.9K1 0

JS 实现简单的页面局部打印

JS实现局部打印和预览：第一种： JS 实现简单的页面局部打印 function preview(oper) { if (oper < 10)...{ bdhtml=window.document.body.innerHTML...--startprint"+oper+"-->";//设置打印开始区域 eprnstr="";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取...--endprint1--> 再加个打印按纽 onclick=preview(1) 第二中: 下面就是实现局部打印的代码，跟大家分享一下，希望能够对大家有所帮助。...navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe); } } 将要想打印局部内容

6.4K2 0

表格打印分页实践小结

需求本文主要介绍的不是以上的基本点，而是table在打印的时候，会因为一页无法承载而导致分页，然而我们并不知道分页之后的效果，当我们点击预览的时候才发现，原来一个整体的表格被分为了两个部分，而且还是同一行的被分割坏了...那么产品无疑是希望体验升级的： – 在页面查看时直接显示打印之后的效果，对于打印预览是有心里预期的，可以直接展示出什么位置会分页。...= $('#printContainer') 准备好分页的间隔模板 const tableHeader = 'table class="m-print-table-process">'...const tableFooter = 'table>' 分页符的样式因为我的ui体验是设计页面展示时也进行相应的分页，所以没有加媒体查询...希望能帮助到你实现这部分需求的实现。

1.8K3 1

前端js实现打印（导出）excel表格

button type="button" class="btn green" id="excell" onclick="method5('dataTable')">导出考勤表 js...代码 //打印表格 var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ;...table.nodeType) table = document.getElementById(table) var ctx = {...> //打印表格 var idTmr; function getExplorer() {...table.nodeType) table = document.getElementById(table) var ctx =

9.8K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭