JQuery 数据表溢出答案

【问题标题】：JQuery Datatables overflowJQuery 数据表溢出
【发布时间】：2011-10-05 00:28:07
【问题描述】：

我已经在一个选项卡式容器中解决了我的数据，如果表格太长，它会溢出。当我更改选项卡时，以下代码会调整列的大小：

$('#tmTabs').tabs( {
    "show": function(event, ui) {

        var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
        if ( oTable.length > 0 ) {
            oTable.fnAdjustColumnSizing();
        }
    }
} );

但是，处理时间有点费力，并且此当前代码仅在您更改选项卡时才有效。表溢出，当任何操作被调用时，即排序、添加行或过滤等。

这是溢出的截图，你可以在右侧看到，如箭头所示（只是用白框将数据空白，所以不用担心）：

如有必要，这是我创建数据表的其余代码（我也在使用可编辑插件）：

$('.dataTable').each(function(){ 
    //get ID of current table;
    tblID = $(this).attr("id");
    var pattern = "[0-9]+";
    $tblIDNum = tblID.match(pattern);

    //transform this table into a data table
    $(this).dataTable({ 
        "sScrollY": "600px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
            ]
        }) 

    .makeEditable({
            //ajax requests for server-side processing
            sUpdateURL: "UpdateData.php",
            sAddURL: "AddData.php",
            sDeleteURL: "DeleteData.php",

            //Button Customization
            oAddNewRowButtonOptions: { 
            label: "Add...",
                            icons: { primary: 'ui-icon-plus' }
                        },
                        oDeleteRowButtonOptions: {
            label: "Remove",
                            icons: { primary: 'ui-icon-trash' }
                        },
                        oAddNewRowOkButtonOptions: {
            label: "Confirm",
                            icons: { primary: 'ui-icon-check' },
                            name: "action",
                            value: "add-new"
                        },
                        oAddNewRowCancelButtonOptions: { 
            label: "Close",
                            class: "back-class",
                            name: "action",
                            value: "cancel-add",
                            icons: { primary: 'ui-icon-close' }
                        },
            oAddNewRowFormOptions: {
                title: 'Add New Row',
                show: "blind",
                hide: "explode"
                },

            //Link button ids
            sAddDeleteToolbarSelector: ".dataTables_length",
            sAddNewRowFormId: "formAddNewRow"+$tblIDNum,
            sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum,
            sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum,
            sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum,
            sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum                                
            });

});

解决办法是什么？我认为应该不难，如果不是所有的 Javascript，CSS 溢出属性就可以改变。让我后悔使用数据表。：/

【问题讨论】：

标签： jquery datatables

【解决方案1】：

添加"sScrollX": "100%"

   $(this).dataTable({ 
        "sScrollX": "100%",
        "sScrollY": "600px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
            ]
        })

【讨论】：

这行得通，但它似乎阻止了列的大小调整，有没有办法保持两者？（我只是希望它调整列的大小以填充表格的宽度）。还有另一个问题，它在 Firefox v7.0 上运行良好，但是在我的一些桌子上使用 google chrome，桌子上出现了一个空白块。