Question

我正在使用jQuery DataTables。

我想让我的表一直出现（加载时的原始状态）：

当我点击标题时，我有时会遇到这样的情况：

可以看出，它超出了屏幕范围。

我想要的是列宽是固定的，整个表宽度设置为第一个屏幕截图的大小。它必须在浏览器变小时做出响应。

这是我的代码：在我的head.php

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/r-2.2.0/datatables.min.css"/>    
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script defer="defer" type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/r-2.2.0/datatables.min.js"></script>

在我看来，我得到了以下内容：

<div class="content">
    <div class="container">
        <div class="row">
            <table id="table_id" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Titel</th>
                    <th>Postcode</th>
                    <th>Stad/gemeente</th>
                    <th>Straat en nummer</th>
                    <th>Zichtbaarheids startdatum</th>
                    <th>Zichtbaarheids einddatum</th>
                    <th>Activiteit startdatum</th>
                    <th>Activiteit einddatum</th>
                    <th>Aantal keer bekeken</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($vacancies as $vac) {
                    echo "<tr>";
                    echo "<td>$vac->name</td>";
                    echo "<td>$vac->address_postal_code</td>";
                    echo "<td>$vac->address_city</td>";
                    echo "<td>$vac->address_line_1 $vac->address_line_2</td>";
                    echo "<td>$vac->vacancy_visibility_start_date</td>";
                    echo "<td>$vac->vacancy_visibility_end_date</td>";
                    echo "<td>$vac->date_from</td>";
                    echo "<td>$vac->date_to</td>";
                    echo "<td>$vac->watch_counter</td>";
                    echo "<td>$vac->status</td>";
                    echo "</tr>";
                }
                ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

我在javascript中尝试了以下内容：

$('#table_id').DataTable({
        responsive: true,
        "autoWidth": false
    });

还尝试了另一个SO帖子中给出的解决方案： http://jsfiddle.net/hdnquzk4/4/

两者都没有解决这个问题！

编辑：我也尝试将table-responsive类放到表格中，这会在表格底部创建一个水平滚动条。

Answer 1

那是因为你的表格单元格中有一个长字符串，你的表格会扩展是正常的，我建议你做的是剪切链条并添加三个最终点以防万一超出字符限制：

PHP解决方案：

<?php
    foreach ($vacancies as $vac) {
        echo "<tr>";
        echo '<td title='.$vac->name.'>'. ( strlen($vac->name) > 10 ? substr($vac->name, 0, 10).'...' : $vac->name ) .'</td>';
        ...
        echo "</tr>";
    }
?>

数据表解决方案：

$('#table_id').DataTable({
    'columnDefs': [
        {
        'targets': [0, 1, 2], // target columns are 0, 1 and 2 for example
        'render': function(data, type, full, meta){
                if(type === 'display'){
                    data = typeof data === 'string' && data.length > 10 ? data.substring(0, 10) + '...' : data;
                }

                return data;
            }
        }
    ]
});

Answer 2

如果有人想把数据分成多行，试试这个：

'columnDefs': [
    {
        'targets': [0,1,2], 
        'render': function (data, type, full, meta) {                         
            var maxLength = 10;
            if (data) {
                if (data.length > maxLength) {
                    var tempData = '';
                    while (data.length > maxLength) {
                        tempData = tempData + data.substring(0, maxLength) + '<br/>';
                        data = data.substring(maxLength);
                    }
                    tempData = tempData + data;
                    return tempData;
                }
                else {
                    return data;
                }                                
                
            }
            else {
                return '';
            }
            
        }
    }
],

样式化数据表不会超出屏幕

2 个答案: