DataTables jquery 在我的表中的所有 TD 周围添加一个 DIV

Question

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

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

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

我知道，如果我可以将 <td>Long Text</td> 包围在 <div class="Scrollable"><td>Long Text</td></div> 中，这将解决它。我在其他未使用 DataTable 格式的 table 上完成了此操作。我似乎无法让它工作。

下面是我如何初始化 table:

<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 函数，这样它将在它 returns 的值周围添加 <div> 以便在初始化 DataTable 时 <div> 已经到位并且 <td> 是放在它周围。

函数现在看起来像这样：

static function data_output($columns,$data)
{
    $DateFields = include 'DateFields.php';
    $out = array();
    for($i=0,$ien=count($data);$i<$ien;$i++)
    {
        $row = array();
        for($j=0,$jen=count($columns);$j<$jen;$j++)
        {
            $column = $columns[$j];
            if(isset($column['Formatter']))
            {
                echo "Formatter<br>";
                $row[$column['dt']] = $column['Formatter']($data[$i][$column['db']],$data[$i]);
            }
            else
            {   //This is were I added the <div> around the value returned.                 
                $row[$column['dt']] = "<div class='Scrollable'>" .$data[$i][$columns[$j]['db']]. "</div>";
                if(in_array($column['db'],$DateFields,TRUE) && $row[$column['dt']] != '')
                {
                    $row[$column['dt']] = substr($data[$i][$columns[$j]['db']],5,2) . "/" . substr($data[$i][$columns[$j]['db']],8,2) . "/" . substr($data[$i][$columns[$j]['db']],2,2);
                }
            }
        }
        $out[] = $row;
    }
    return $out;
}

DataTables jquery 在我的表中的所有 TD 周围添加一个 DIV

DataTables jquery add a DIV around all the TD in my tables

css

jquery

datatables-1.10