Tabellenkopf wird nicht mit Tabelleninhalt ausgerichtet, während scrollX verwendet wird = true

Ich habe eine dataTable, wo ich den Inhalt anzeigen muss, der von der Datenbank geholt wird. Aber das Problem ist, ich muss den Inhalt in einem div anzeigen. Bei Verwendung von "scrollX": true ist der Tabellenkopf nicht mit dem Tabelleninhalt ausgerichtet.Tabellenkopf wird nicht mit Tabelleninhalt ausgerichtet, während scrollX verwendet wird = true

Es wird wie folgt angezeigt:

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

Aber es sollte so aussehen:

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

Dies ist, wie ich versucht:

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

Was soll ich mit zusammen hinzufügen dies, damit die Tabelle richtig angezeigt wird?

Quelle

2016-07-27 SSS

Ich hatte das gleiche Problem. Es scheint, als ob es durch die Art und Weise verursacht wurde, wie resizing im Produkt behandelt wird.

Ich war durch das Auslösen resize Ereignis beheben können:

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

Es bindet _fnAdjustColumnSizing-resize, aber irgendwann resize:

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

In der Quelle der Tables Sie den Code finden wird nicht ausgelöst.

aktualisieren:

Versuchen Sie, eine Tabellenbreite in scrollX Parameter einzustellen:

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

Quelle

2016-07-27 12:09:53

Es arbeitet ist nicht bro. – SSS

wurde die Antwort aktualisiert –

Sie einen Verweis auf die Datentabelle brauchen:

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

Dann müssen Sie eine Kombination davon:

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

Unter Umständen müssen Sie den Code aus Gründen aufzuschieben ...

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

Quelle

2016-07-27 14:19:42 thirtydot

Tabellenkopf wird nicht mit Tabelleninhalt ausgerichtet, während scrollX verwendet wird = true

Antwort

Verwandte Themen