scrollX = trueを使用してテーブルのヘッダーがテーブルの内容と整列しない

データベースからフェッチされた内容を表示する必要があるdataTableがあります。しかし、問題は、私はdiv内の内容を表示する必要があります。 "scrollX"を使用している間：true、テーブルヘッダーはテーブルの内容と揃っていません。scrollX = trueを使用してテーブルのヘッダーがテーブルの内容と整列しない

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

これは私が試した方法です：

それはこのように表示されます：

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

しかし、それはこのようにする必要があり

<?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>

私が一緒に追加する必要がありますどのような

これは、テーブルが適切に表示されるようにするためですか？

出典

2016-07-27 SSS

私は同じ問題がありました。 resizingがどのように製品内で処理されるかによって引き起こされたようです。

私はresizeイベントをトリガーすることによって解決することができました：のDataTableのソースで

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

あなたは、コードを見つけることができます：

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

それはresizeから_fnAdjustColumnSizingを結合するが、いつかresizeトリガーされません。

更新：

scrollXパラメータでテーブルの幅を設定してください：

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

出典

2016-07-27 12:09:53

それは仲間を働いていません。 – SSS

回答が更新されました –

あなたがたDataTableへの参照が必要になります。

var table = $('#table').DataTable();

その後、あなたには、いくつかの組み合わせを必要としますこのうち：

table.draw(); 
table.columns.adjust(); 
table.scroller.measure();

あなたが理由のためのコードを延期する必要があるかもしれません...

setTimeout(function() { 
    table.draw(); 
    table.columns.adjust(); 
    table.scroller.measure(); 
}, 1);

出典

2016-07-27 14:19:42 thirtydot

scrollX = trueを使用してテーブルのヘッダーがテーブルの内容と整列しない

答えて

関連する問題