Question

我在表格上使用DataTables格式。我使用服务器端处理和固定页眉和页脚。

我发现当不同浏览器的文本很长时，<td>值的显示方式不一致。

Chrome我获得了一个可用的滚动条（预期结果）
IE我看到了滚动条，但无法使用它
Firefox长文本刚刚溢出到右边

我知道，如果我可以将<td>Long Text</td>包围在<div class="Scrollable"><td>Long Text</td></div>中，那就可以修复它。我在其他未使用DataTable格式的表上完成了此操作。我似乎无法让它发挥作用。

这是我如何初始化我的表格：

<script type="text/javascript" class="init">
    $.fn.dataTable.ext.buttons.export =
    {
        className: 'buttons-alert',
        "text": "Export All Test",
        action: function (e, dt, node, config)
        {
            alert('Export All Test');
        }
    };

    $(document).ready(function ()
    {

        // Setup - add a text input to each footer cell
        $('#DataTable tfoot th').each(function ()
        {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#DataTable').DataTable({
            "lengthMenu": [[25, 50, 75, 100, 150,-1], [25, 50, 75, 100, 150,'All']],
            "dom": '<"top"Bifl<"clear">>rt<"bottom"i<"clear">>',
            "buttons": [{
                extend: 'collection',
                text: 'Selection',
                buttons: ['selectAll', 'selectNone']
            }, {
                extend: 'collection',
                text: 'Export',
                buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                    text: 'Export Current Page',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    },
                    customize: function (xlsx)
                    {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        $('row:first c', sheet).attr('s', '7');
                    }
                },

                {
                    text: 'Export All to Excel',
                    action: function (e, dt, button, config)
                    {
                        dt.one('preXhr', function (e, s, data)
                        {
                            data.length = -1;
                        }).one('draw', function (e, settings, json, xhr)
                        {
                            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                            var addOptions = { exportOptions: { 'columns': ':all'} };

                            $.extend(true, excelButtonConfig, addOptions);
                            excelButtonConfig.action(e, dt, button, excelButtonConfig);
                        }).draw();
                    }
                }]
            }
            ],
            "fixedHeader": {
                header: true,
                footer: true
            },
            "select": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "./ServerSide.php",
                "type": "POST"
            },
            initComplete: function ()
            {
                var api = this.api();

                // Apply the search
                api.columns().every(function ()
                {
                    var that = this;

                    $('input', this.footer()).on('keyup change', function ()
                    {
                        if (that.search() !== this.value)
                        {
                            that
                              .search(this.value)
                              .draw();
                        }
                    });
                });
            }
        });
        //This is what I've tried to get the DIV in place, but it doesn't work.
        $('#DataTable tbody td').wrap('<div class="Scrollable"></div>');
    });
</script>

我的CSS中有这个这应该允许滚动条在所有浏览器中出现和使用

div.Scrollable {
    overflow-x: auto;
    width: 100%;
}

这应该使Long Text环绕并增加行的高度以适应它。

.selected {
    background-color: #999999 !important;
    color: #fff;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word;
    max-height: 500px;
}

我不太了解jquery来解决这个问题。

修改

我也试过这个：

$('#DataTable td').wrap(function(){ return "<div class='Scrollable'></div>"});

编辑2

我刚刚意识到我一直试图向后做这件事。我需要<td></td>缠绕<div></div>，以便<td><div class="Srcollable">Text Value</div></td>

这是问题的fiddle。这在Chrome中不是问题，但在IE和Firefox中存在问题。

第一行和第三行没有<div>第二行有<div>并且有可用的滚动条。

Answer 1

我刚想通了！

在 ssp.class.php 文件的修改版本中（来自here）我更新了 data_output 函数，以便它添加{{ 1}}围绕它返回的值，以便在初始化DataTable时<div>已经就位，<div>放在它周围。

该功能现在如下所示：

<td>

DataTables jquery在我的表

1 个答案: