Question

我已经开始使用带有Scroller功能的DataTables并遇到以下“bug”。如果有一个非常长的字段（我的是例如堆栈跟踪）和启用了滚动条（虚拟加载），则表格将水平扩展，以便X滚动条可见。我如何防止这种情况并使DataTables在网格中包装长数据集？

注意：如果我禁用Scroller功能，则没有X滚动条和堆栈跟踪正常形成。

With scroller addon fiddle

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

$(document).ready(function() {
$('#example').DataTable( {
    serverSide: true,
    ordering: false,
    searching: false,
    ajax: function ( data, callback, settings ) {
        var out = [];

        for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
            out.push( [ i+'-10000000000000000 gggggggggdfgdfgdf werwerwerwerwer wewrwewwwwwerwerwerw.erwerwerwe werwwwwwwwwwwwerwe .werrrrrrrrrrrrrrwer23r werwwwwwwwwww', i+'-20', i+'-3', i+'-4', i+'-5' ] );
        }

        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: out,
                recordsTotal: 5000000,
                recordsFiltered: 5000000
            } );
        }, 50 );
    },
    scrollY: 200,
    scroller:{
        loadingIndicator: true
    }
} );
} );

Without scroller addon fiddle

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>ZIP / Post code</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

$(document).ready(function() {
$('#example').DataTable( {
    serverSide: true,
    ordering: false,
    searching: false,
    ajax: function ( data, callback, settings ) {
        var out = [];

        for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
            out.push( [ i+'-10000000000000000 gggggggggdfgdfgdf werwerwerwerwer wewrwewwwwwerwerwerw.erwerwerwe werwwwwwwwwwwwerwe .werrrrrrrrrrrrrrwer23r werwwwwwwwwww', i+'-20', i+'-3', i+'-4', i+'-5' ] );
        }

        setTimeout( function () {
            callback( {
                draw: data.draw,
                data: out,
                recordsTotal: 5000000,
                recordsFiltered: 5000000
            } );
        }, 50 );
    }

} );
} );

Answer 1

出于某些特殊原因，scroller.dataTables.min.css设置了white-space: nowrap;。

启用wordwrap（在第一栏中作为小提琴建议）：

.dataTables_scrollBody td:nth-child(1) {
    max-width: 100px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all; 
}

word-break: break-all;似乎是多余的，但它可以确保更均匀的自动换行。没有break-all，如果你有一个很长的连续字符串，自动换行往往会包含在奇怪的地方，给出一个丑陋的结果。

您还可以删除长字符串并显示省略号：

.dataTables_scrollBody td:nth-child(1) {
    max-width: 100px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

更新了两个例子 - ＆gt;的 https://jsfiddle.net/vrtL736g/4/

DataTables服务器端具有滚动器格式错误

1 个答案: