Datatable Bootstrap4 print not maintaining customized html styling

Datatable Bootstrap4 print not maintaining customized html styling

dan.cosiodan.cosio Posts: 4Questions: 1Answers: 0

I posted the same question on stack overflow.. hoping I can get an answer from one of the forums

I'm using Bootstrap 4 with Datatables and found that when using bootstrap I lose my styling that is set in the print format and customization functions.

I have an example here in jsfiddle

In the jsfiddle code I have the bootstrap4 JS uncommented.. When you click print the dialog pops up and other page with the correct bg color, but the print dialog that pops up no longer has it..

If you comment out bootstrap4 and uncomment the Datatables-default styling and do the same test, you will see that the print dialog maintains the bg color. This is also true when using jquery..

My app is using Bootstrap4 so I need this to work..

Any help to a solution to this is greatly appreciated..

This is the page code that is also in 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  && 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>

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    See my reply on the other thread you commented on here. DataTables doesn't export the colours, so you have to hand-craft it if you want it in the PDF/print.

    Colin

This discussion has been closed.