#StackBounty: #twitter-bootstrap-3 #datatable Bootstrap datatable header and column not same

Bounty: 50

I have used bootstrap server-side data table in my PHP project it works like a charm but my problem is with the last column of table separate border, it’s not showed I don’t know why

The other problem with data table in print page, the header of columns not same with the column.

  1. last column separate border not show:

enter image description here

  1. In print view column and header not same:
    enter image description here

Html code:

<table class="table table-bordered cell-border" width="100%" cellspacing="0" id="patientsReport">
                    <thead>
                        <tr>
                            <th class="text-center">تاریخ</th>
                            <th class="text-center">نام</th>
                            <th class="text-center">وضیت روحی</th>
                            <th class="text-center">انرژی</th>
                            <th class="text-center">تغذیه</th>
                            <th class="text-center">ورزش</th>
                            <th class="text-center">خستگی</th>
                            <th class="text-center">فعالیت</th>
                            <th class="text-center">خواب</th>
                            <th class="text-center">عوامل تاثیرگذار بر خواب</th>
                            <th class="text-center">سایر علائم</th>
                            <th class="text-center">یادداشت</th>
                        </tr>
                    </thead>
         </table>

Javascript code:

$('#patientsReport').dataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copy',
                titleAttr:'کپی' ,
                text: '<i class="fa fa-files-o"></i>',
                columns: ':visible'
            },
            {
                text: '<i class="fa fa-print"></i>',
                action: function ( e, dt, node, config ) {
                    window.onafterprint = function(){
                        $('.dt-buttons').show();
                    };
                    $('.dt-buttons').hide();
                    window.print();
                }
            },
            {
                extend: 'excel',
                text: '<i class="fa fa-file-excel-o"></i>',
                columns: ':visible'
            },
        ],

        "processing": true,
        "serverSide": true,
        "paging": false,
        "searching": false,
        "info": false,
        "ordering": false,
        'ajax': '<?php echo $rdr_str ?>',
        'language': {
            url : 'Resources/lang/Persian.json'
        },
        scrollX:        true,
        scrollCollapse: true,
        columnDefs: [

        ],
        fixedColumns: false,
        "columns": [
            { data: "15", },
            { data: "1" },
            { data: "9", visible: <?php echo $chkMental ?> },
            { data: "6", visible: <?php echo $chkEnergy ?> },
            { data: "12", visible: <?php echo $chkNutrition ?> },
            { data: "10", visible: <?php echo $chkSport ?> },
            { data: "7", visible: <?php echo $chkFatigue ?> },
            { data: "11", visible: <?php echo $chkActivity ?> },
            { data: "5", visible: <?php echo $chkSleep ?> },
            { data: "18", visible: <?php echo $chkSleep2 ?> },
            { data: "8", visible: <?php echo $chkOther ?> },
            { data: "17", visible: <?php echo $chkNote ?> },
            // { data: "16" },

        ]
    });


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.