Блог

Я разместил свои блоки данных в контейнере с вкладками, если таблица слишком длинная, она переполняется. Следующий код изменяет размеры столбцов при смене вкладок:

 $('#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 можно было бы просто изменить. Заставляет меня сожалеть об использовании таблиц данных. : /

Добавить "sScrollX": "100%"

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