数据表打印复杂表头打印预览

2024-03-14

您好,我正在使用数据表,它很棒,但我在像这样的复杂标头中遇到问题

<thead>
    <tr><td>some text</td></tr>
    <tr><td>some text</td></tr>
</thead>

now in showing page its like like this enter image description here when i hit print preview i gat result like this enter image description here

那第一个tr in thead离开了 我打开 datatable.js 文件,发现了这个

        var addRow = function ( d, tag ) {
        var str = '<tr>';

        for ( var i=0, ien=d.length ; i<ien ; i++ ) {
            // null and undefined aren't useful in the print output
            var dataOut = d[i] === null || d[i] === undefined ?
                '' :
                d[i];
            var classAttr = columnClasses[i] ?
                'class="'+columnClasses[i]+'"' :
                '';

            str += '<'+tag+' '+classAttr+'>'+dataOut+'</'+tag+'>';
        }

        return str + '</tr>';
    };

    // Construct a table for printing
    var html = '<table class="'+dt.table().node().className+'">';

    html += '<thead>';

    // Adding logo to the page (repeats for every page while print)
    if(config.repeatingHead.logo) {
        var logoPosition = (['left','right','center'].indexOf(config.repeatingHead.logoPosition) > 0) ? config.repeatingHead.logoPosition : 'right';
        html += '<tr><th colspan="'+data.header.length+'" style="padding: 0;margin: 0;text-align: '+logoPosition+';"><img style="'+config.repeatingHead.logoStyle+'" src="'+config.repeatingHead.logo+'"/></th></tr>';
    }

    // Adding title (repeats for every page while print)
    if(config.repeatingHead.title) {
        html += '<tr><th colspan="'+data.header.length+'">'+config.repeatingHead.title+'</th></tr>';
    }

    if ( config.header ) {
        html += addRow( data.header, 'th' );
    }

    html += '</thead>';

    html += '<tbody>';
    for ( var i=0, ien=data.body.length ; i<ien ; i++ ) {
        html += addRow( data.body[i], 'td' );
    }
    html += '</tbody>';

    if ( config.footer && data.footer ) {
        html += '<tfoot>'+ addRow( data.footer, 'th' ) +'</tfoot>';
    }
    html += '</table>';

它只是在 thead 中添加最后一个 tr 但我无法将第一个 tr 与打印预览一起放置 多谢

这是 jsfiddle 的前任 当您预览表格时,它的头部显示有两行 但在打印预览中,它仅显示在 thead 中的 tr 上

在此输入链接描述 https://jsfiddle.net/ogkvu4xp/


正如中所讨论的this https://datatables.net/forums/discussion/36666/print-two-headers主题来自数据表网站 https://datatables.net,此功能尚不可用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数据表打印复杂表头打印预览 的相关文章

  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 用于传输命名参数和正文的云端点资源属性不起作用

    我正在尝试通过gapi client rpc调用实现对谷歌云端点的调用 如文档中所述 和Google Cloud Endpoints 使用 JS 客户端进行调用 传递参数和 JSON 正文 https stackoverflow com q
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • 如何在美人鱼节点描述中添加链接?

    我想 如下图所示 div class mermaid graph TD A hello B an b important b link A gt B div 在下面添加实际链接link指向http google com 我尝试将相关节点修改
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • 如何使用 poedit 解析 Timber(树枝)模板并检测要翻译的引用字符串

    我想用 poedit 解析 Timber 的树枝模板 并且需要翻译引用的内容 问题是我找不到不跳过引用内容的解析器 Example
  • 将字符串转换为正确的 URI 格式?

    有没有简单的方法可以将电子邮件地址字符串转换为正确的 URI 格式 Input http mywebsite com validate email 3DE4ED727750215D957F8A1E4B117C38E7250C33 email
  • 在移动网站中处理 iPhone 事件(如向左滑动)

    iPhone 浏览器是否有可以使用 Javascript 挂钩的特殊事件 例如 如果用户向左滑动 我想执行某个操作 如果有类似的活动 很高兴看到所有这些活动的参考 理想情况下 有一天所有触摸屏移动浏览器都会有一个标准 您可以访问多点触控事件
  • 在 Chrome 中加载analytics.js时出现307重定向

    我正在构建一个网络应用程序并使用 Google Analytics analytics js 进行分析 我最近注意到 Chrome 中的分析功能无法正常工作 我使用单独模块中的标准代码片段加载分析并通过 requirejs 包含 我已验证该
  • Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作?

    我注意到一个来自 Google 的博文 http gmailblog blogspot com 2011 06 pasting images into messages just got html其中提到 如果您使用的是最新版本的 Chro
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 适用于多应用项目的 Grunt 和 requirejs 优化器

    我在让 Grunt 对具有以下结构的项目执行 requirejs 优化时遇到问题 static js apps app js dash js news js many more app files build collections lib
  • Babel/RequireJS + typeof“RangeError:超出最大调用堆栈大小”

    我有一个非常基本的 JS 错误 我很羞愧无法解决它 我正在使用 ES6 和 Babel 进行开发 并且正在做一些实验 请注意 我在 Babel 中使用了这些参数 presets es2015 plugins transform es2015
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • 有没有办法从画布上清除一个元素而不消除其他元素?

    我正在使用画布构建页面加载器 并使用 es6 类 虽然目前我无法使其正常工作 原因之一是我找不到清除画布的方法进展 到目前为止 这是我的代码 class Loader constructor width height this width
  • JavaScript 正则表达式两个标签之间的多行文本

    我编写了一个正则表达式来从 HTML 中获取字符串 但似乎多行标志不起作用 这是我的模式 我想将文本输入h1 tag var pattern div class box content 5 h1 lt lt h1 gt mi m html
  • iframe 主体删除空间

    我的 iframe 风格为style width 100 几乎覆盖了页面宽度 但它在左侧和右侧留下了一个小边距 所以我添加了body margin 0px 删除空间 它有效 但问题是删除边距影响其他事物 例如段落 p inside 有没有办
  • 以 UTF8 而不是 UTF16 输出 DataTable XML

    我有一个 DataTable 我正在使用 WriteXML 创建一个 XML 文件 尽管我在以 UTF 16 编码导出它时遇到问题 并且似乎没有明显的方法来更改它 我了解 NET 在字符串内部使用 UTF 16 这是正确的吗 然后 我通过

随机推荐