#jquery #css #bootstrap-4 #datatables
#jquery #css #bootstrap-4 #таблицы данных
Вопрос:
Я использую Bootstrap 4 с таблицами данных и обнаружил, что при использовании bootstrap я теряю свой стиль, который задан в формате печати и функциях настройки.
У меня есть пример здесь, в jsfiddle
В коде jsfiddle у меня есть раскомментированный JS bootstrap4.. При нажатии кнопки печать появляется диалоговое окно и другая страница с правильным цветом bg, но в появившемся диалоговом окне печати его больше нет..
Если вы закомментируете bootstrap4 и раскомментируете таблицы данных-стиль по умолчанию и выполните тот же тест, вы увидите, что диалоговое окно печати сохраняет цвет 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, type, row ) {
return row.scores;
}
}, {
"data" : "evidenceCount",
render: function ( data, type, 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 amp;amp; 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>