JQuery Datatables溢出 [英] JQuery Datatables overflow

问题描述

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

I have settled my datables within a tabbed container, If the table is too long, it overflows. The following code resizes the columns when i change tabs:

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

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

但是，在处理时间上有点税收，而此当前代码仅在更改选项卡时有效。该表溢出，当调用任何操作时，排序，添加行或过滤等。

but, is a bit taxing on processing time and this current code only works when you change the tab. The table overflows, when any operation is called on it, that being sorting, adding a row, or filtering etc.

是一个溢出的屏幕截图，你可以看到右边，箭头指出（刚刚清空了白盒子的数据，所以不用担心）：

Heres a screenshot of the overflow, you can see on the right side, as pointed by the arrow (just blanked out the data with white boxes, so dont worry about those):

如有必要，请留下我的其余代码创建dataTable（我也使用可编辑的插件）：

If necessary, heres the rest of my code to create the dataTables (i am also using the editable plugin):

$('.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的溢出属性可以改变。令我遗憾的是使用Datatables。 ：/

What could the solution be? I don't think should be difficult, if it weren't for all the Javascript, a CSS overflow property could just be changed. Makes me regret using Datatables. : /

推荐答案

添加sScrollX：100％ / p>

add "sScrollX": "100%"

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

这篇关于JQuery Datatables溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！