如何解决Bootstrap4 Datatables打印自定义样式丢失
我正在将Bootstrap 4与Datatables一起使用，发现使用引导程序时，我会松开以打印格式和自定义功能设置的样式。
我在jsfiddle中有一个example
在jsfiddle代码中，我未对bootstrap4 JS进行注释。.单击“打印”时，对话框将弹出，并且其他页面具有正确的bg颜色，但是弹出的打印对话框不再具有它。.
如果注释掉bootstrap4并取消注释Datatables默认样式并进行相同的测试，则会看到打印对话框保持bg颜色。使用jquery时也是如此。
我的应用程序正在使用Bootstrap4，因此我需要它来工作。
对于解决此问题的任何帮助，我们将不胜感激。
这也是jsfiddle中的页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>dt-test</title>
</head>
<!-- Datatables - Bootstrap4-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.print.js"></script>
<!-- Datatables default DT styles -->
<!--
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.dataTables.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.print.js"></script>
-->
<style>
td.score_red {
background-color: red;
}
td.score_yellow {
background-color: yellow;
}
td.score_green {
background-color: green;
}
</style>
<script type="text/javascript">
var dataSet = [
{ "itemKey" : 15,"userID": 25,"user" : {"id":25,"lname":"Doe","fname":"John"},"scores" : 1,"evidence": [],"description": "some item description" }
];
$(document).ready(function() {
$('#previewresultstable').DataTable(
{
data: dataSet,dom : 'Bfrtip',columns : [ {
"data" : "itemKey"
},{
"data" : "userID",render: function ( data,type,row,meta) {
return '<a href="user_profile.jsp?patientId=' + row.userID +' ">' + row.user.lname + ',' + row.user.fname + '</a>';
}
},{
"data" : "itemResult",render: function( data,row ) {
return row.scores;
}
},{
"data" : "evidenceCount",row ) {
var res = 'No Evidence Found';
if(data > 0)
res = '<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#evidencemodal" data-preview="true" data-userId="' + row.user.id + '" data-itemKey="' + row.itemKey + '">View Records</button>';
return res;
}
},{
"data" : "description"
}
],select : true,lengthMenu : [ [ 5,25,50,-1 ],[ '5 rows','25 rows','50 rows','Show all' ] ],buttons : [ {
extend : 'print',exportOptions: {
columns: [0,1,2,4],format: {
body: function ( inner,rowidx,colidx,node ) {
if (node.classList.contains('score_red')) {
return '<span class="score_red">' + inner + '</span>';
} else if (node.classList.contains('score_yellow')) {
return '<span class="score_yellow">' + inner + '</span>';
} else if (node.classList.contains('score_green')) {
return '<span class="score_green">' + inner + '</span>';
} else {
return inner;
}
}
}
},customize: function(win,button,tableapi){
$(win.document.body).find('span.score_red').parent().css('background-color','red');
$(win.document.body).find('span.score_yellow').parent().css('background-color','yellow');
$(win.document.body).find('span.score_green').parent().css('background-color','green');
}
} ],rowCallback: function(row,data,index){
if(data.scores <= 1){
$(row).find('td:eq(2)').addClass('score_red');
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').addClass('score_yellow');
}
if(data.scores > 2){
$(row).find('td:eq(2)').addClass('score_green');
}
},order : [],responsive : true
});
});
</script>
<body>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="previewresultsrow" >
<div class="panel-group">
<div class="panel panel-primary">
<!-- /.panel-heading -->
<div id="previewresultspanel" >
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover"
id="previewresultstable" style="width: 100%">
<thead>
<tr>
<th>Item</th>
<th>Patient Name</th>
<th>Score</th>
<th>Evidence</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
<!-- /.panel-body -->
</div>
</div>
<!-- /.panel -->
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
