Question

我有一个dataTable，我必须显示从数据库中提取的内容。但问题是，我必须在div中显示内容。使用＆＃34; scrollX＆＃34;：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>

我应该添加什么，以便表格能够正确显示？

Answer 1

我有同样的问题。似乎是由产品中处理NumberFormatRenderer的方式引起的。

我能够通过触发NumberFormat事件修复：

NumberFormatLabel

在 DataTables 的来源中，您可以找到代码：

resizing

它将resize绑定到$(window).trigger('resize');，但有时var bindResize = function () { $(window).bind('resize.DT-'+oSettings.sInstance, _fnThrottle( function () { _fnAdjustColumnSizing( oSettings ); } ) );未被触发。

<强>更新：

尝试在_fnAdjustColumnSizing参数中设置表格宽度：

resize

Answer 2

您需要对DataTable的引用：

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

然后，你需要一些这样的组合：

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

您可能需要推迟代码......

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

使用scrollX = true时，表头没有与表内容对齐

2 个答案: