jQuery DataTables - fnDestroy (Coffeescript) 后忽略的宽度设置答案

【问题标题】：jQuery DataTables - width settings ignored after fnDestroy (Coffeescript)jQuery DataTables - fnDestroy (Coffeescript) 后忽略的宽度设置
【发布时间】：2013-12-07 01:24:23
【问题描述】：

我正在尝试制作一个表格，当您单击任何行的第一列时，它会以一种“更多详细信息”的方式更改其内容。当我第一次渲染表格时它很好，但是当我再次渲染它时，宽度设置不采用并且表格溢出到右侧，忽略了我设置的宽度。

这基本上就是我的代码正在做的事情：

MyTable = class module.MyTable
    constructor: (@my_data) ->
        setup_table()

    setup_table: ->
        @datatable = $('#my-datatable').dataTable
            bAutoWidth: false
            bPaginate: false
            bSort: true
            bFilter: false
            bRetrieve: true
            iDisplayLength: 50
            aaData: @my_data
            aoColumns: [{
                sWidth: '200px'
                fnRender: (obj) =>
                    # do some stuff
            }, {
                sWidth: '150px'
                fnRender: (obj) =>
                    # do some other stuff
            }]
            fnRowCallback: (row, data) =>
                key = row.cells[0].firstChild.id
                $(row.cells[0].firstChild).unbind().click( () =>
                    @my_data = @get_data(key)
                    @datatable.fnDestroy()
                    @setup_table()
                )
                row

    get_data: (key) ->
        # do some stuff

（我意识到fnRender 已被弃用。）

标记生成如下：

<div class="dataTables_wrapper" id="my-datatable_wrapper">
    <table id="my-datatable">
        <thead>
            <tr>
                <th class="sorting_asc" rowspan="1" colspan="1" style="width: 200px;">
                    yada yada
                </th>
                <th class="sorting" rowspan="1" colspan="1" style="width: 150px;">
                    yada yada
                </th>
            </tr>
        </thead>
        <tbody style="display: table-row-group;">
            <tr class="odd">
                <td class="sorting_1">
                    foo
                </td>
                <td>
                    bar
                </td>
            </tr>
            <tr class="even">
                ...and so on
            </tr>
            ... and so on
        </tbody>
    </table>
</div>

那么……什么给了？ fnDestroy 没有做我认为应该做的事吗？

编辑：为了它的价值，我也尝试使用fnClearTable() 和fnAddData()，但无济于事。

【问题讨论】：

标签： javascript jquery coffeescript datatables jquery-datatables

【解决方案1】：

我发现（经过多次试验和磨难）问题在于，尽管我告诉数据表，任何不适合单元格且无法换行的文本都会导致单元格拉伸。然后，解决方案是添加一些溢出 CSS：

table#my-datatable td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

由于这导致单元格被切断，我将titles 添加到我的单元格中。好吧，实际上，我使用的是twipsy，但我认为 jQuery 中的等价物应该是这样的：

addTitles: ->
    $('table#my-datatable td').each ->
        $cell = $(this)
        $cell.attr('title', $cell.text())

【讨论】：