Question

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

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

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

（我意识到{@ 1}}已被弃用。）

标记生成如下：

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()也无济于事。

Answer 1

我想出了（经过多次试验和磨难之后）问题是，尽管我告诉数据表，但是任何不适合细胞并且无法包裹的文本都会导致细胞伸展。然后，解决方案是添加一些溢出的CSS：

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

由于这导致细胞被切断，我将title添加到我的细胞中。好吧，实际上，我正在使用twipsy，但我认为jQuery中的等价物将是这样的：

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

jQuery DataTables - fnDestroy（Coffeescript）后忽略宽度设置

1 个答案: