如何在jQuery DataTable打印布局中高亮指定行

开发者阿泽

2026-8-17

解决jQuery DataTable打印时保留指定行高亮样式的问题

你已经通过createdRow为目标行添加了d-flag类，要让这个样式在打印时生效，需要从CSS样式适配和DataTables打印配置两方面入手：

1. 添加打印媒体类型的CSS样式

浏览器默认打印时会忽略背景色等样式，需要专门为打印场景设置样式，并强制浏览器保留颜色：

/* 页面显示时的高亮样式 */
.d-flag {
    background-color: #ffcccc !important; /* 替换成你的实际高亮颜色 */
}

/* 打印时的高亮样式 */
@media print {
    .d-flag {
        background-color: #ffcccc !important;
        -webkit-print-color-adjust: exact; /* 适配Chrome、Edge等webkit内核浏览器 */
        print-color-adjust: exact; /* 标准属性，适配其他浏览器 */
    }
}

2. 配置DataTables打印按钮的自定义样式

如果使用DataTables的Buttons扩展实现打印功能，需要确保打印窗口能加载到自定义样式，可通过customize回调在打印窗口中注入样式：

$('#yourTableId').DataTable({
    // 你的其他配置项
    createdRow: function (row, data, dataIndex) {
        var date = new Date(data.dateOfReg);
        var days = datediff(date, new Date());

        if (days >= 30 && parseInt(data.received) < 2000 && parseInt(data.payment) >= 2000) {
           $(row).addClass('d-flag');
        }    
    },
    buttons: [
        {
            extend: 'print',
            customize: function (win) {
                // 向打印窗口的头部注入样式
                $(win.document.head).append(`
                    <style>
                        .d-flag {
                            background-color: #ffcccc !important;
                            -webkit-print-color-adjust: exact;
                            print-color-adjust: exact;
                        }
                    </style>
                `);
            }
        }
    ]
});