the table header does not line up with the contents of the table while using scrollX = true

advertisements

I've a dataTable where I have to display the contents fetched from the database. But the problem is , I have to display the contents inside a div. While using "scrollX": true, the table header does not align with the table contents.

It gets displayed like this:

| S.No | Name | Reg. No. | Course |
|  1   | Balamurugan   | 211311106078  | BE. Electronics and Communication |
|  2   | Sai Krishna S | 211311107098  |      BE. Computer Science         |

But it should be like this:

 | S.No | Name          | Reg. No.      |                Course            |
 |  1   | Balamurugan   | 211311106078  | BE. Electronics and Communication|
 |  2   | Sai Krishna S | 211311107098  |      BE. Computer Science        |

This is how I tried:

<?php
    include("includes/config.php");
    $report = $_GET["report"];
    $title = $_GET["title"];
    $pagetitle = $title;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <?php include("includes/inc-head.php"); ?>
</head>
<body role="document">
    <?php include("includes/inc-header.php"); ?>
    <div class="panel-body form-horizontal">
        <div class="panel panel-default">
            <div class="panel-heading">
                <?php echo $title; ?>
                <input type="hidden" id="input_report" name="input_report" value="<?php echo $report; ?>">
                <div id="toolbar" name="toolbar" class="btn-group pull-right">
                    <button id="full_view" name="full_view" type="button" class="btn btn-info btn-sm" onclick="window.open('fullview-for-dashboard.php');">
                    Full View
                    </button>
                </div>
            </div>
            <div class="panel-body form-horizontal">
                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_dashboard" class="table table-colstriped table-bordered table-hover hide">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Total Mark</th>
                            <th>Total Percentage</th>
                            <th>Name of the Student</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_profit" class="table table-bordered table-colstriped table-hover hide">
                    <thead>
                        <tr>
                            <th>S. No</th>
                            <th>Name</th>
                            <th>Reg. No.</th>
                            <th>Chain Name</th>
                            <th>Course</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<script type="text/javascript" language="javascript">
    jQuery(document).ready(function(){
        jQuery.ajaxSetup({cache: false});

        var input_report = jQuery("#input_report").val();
        var table_id = "#table_" + input_report;

        jQuery(table_id).removeClass("hide").addClass("show");
        jQuery(table_id).dataTable({
            dom: "<'row'<'col-sm-12'Bftri>>" + "<'row'<'col-sm-4'l><'col-sm-8'p>>",
            "sAjaxSource": "db.php?repor_name=" + input_report,
            "bDestroy": true,
            "scrollX": true,
            "bInfo": true,
            select: true,
            buttons: [{

                        extend: 'collection',
                        text: 'Export',
                        buttons:[
                                {
                                    extend: 'pdfHtml5',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    text: '<i class="fa fa-file-pdf-o">&nbsp&nbsp&nbsp&nbsp&nbspPDF</i>',
                                    titleAttr: 'PDF'
                                },
                                {
                                    extend: 'excelHtml5',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    text: '<i class="fa fa-file-excel-o">&nbsp&nbsp&nbsp&nbsp&nbspEXCEL</i>',
                                    titleAttr: 'Excel'
                                },
                                {
                                    extend: 'csvHtml5',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    text:      '<i class="fa fa-file-text-o">&nbsp&nbsp&nbsp&nbsp&nbspCSV</i>',
                                    titleAttr: 'CSV'
                                },
                                {
                                    extend: 'copyHtml5',
                                    orientation: 'landscape',
                                    pageSize: 'LEGAL',
                                    text: '<i class="fa fa-files-o">&nbsp&nbsp&nbsp&nbsp&nbspCOPY</i>',
                                    titleAttr: 'Copy'
                                }
                    ]
                    },
                    {
                        extend: 'print',
                        orientation: 'landscape',
                        pageSize: 'LEGAL'
                    }
                    ]
        });
    });
</script>
</body>
</html>

What should I add along with this, so that the table will be displayed properly?


I had the same issue. Seems like it's caused by the way how resizing is handled in the product.

I was able to fix by triggering resize event:

$(window).trigger('resize');

In the source of DataTables you can find the code:

var bindResize = function () {
    $(window).bind('resize.DT-'+oSettings.sInstance, _fnThrottle( function () {
        _fnAdjustColumnSizing( oSettings );
} ) );

It binds _fnAdjustColumnSizing to resize, but sometime resize isn't triggered.

Update:

Try to set a table width in scrollX parameter:

$('#table').dataTable({
  ...
  scrollX: '100%',
  ...
});