Таблицы данных jQuery:ширина контрольного стола

StackOverflow https://stackoverflow.com/questions/604933

Вопрос

У меня проблема с управлением шириной таблицы с помощью плагина jQuery DataTables.Предполагается, что таблица должна составлять 100% от ширины контейнера, но в итоге получается произвольная ширина, скорее меньшая, чем ширина контейнера.

Предложения приветствуются

Объявление таблицы выглядит следующим образом

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

И javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `

Просматривая HTML-код в Firebug, вы видите это (обратите внимание на добавленный style="width:0 пикселей;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Просматривая стили в Firebug, стиль table.display был переопределен.Не могу понять, откуда это берется

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}
Это было полезно?

Решение

Проблема вызвана тем, что DataTable должен вычислять свою ширину, но при использовании внутри вкладки он не виден, следовательно, не может вычислить ширину.Решение состоит в том, чтобы вызвать "fnAdjustColumnSizing", когда появится вкладка.

Преамбула

В этом примере показано, как таблицы данных с прокруткой можно использовать вместе с вкладками пользовательского интерфейса jQuery (или любым другим методом, при котором таблица находится в скрытом элементе (display: none) при ее инициализации).Причина это требует особого рассмотрения, заключается в том, что когда DataTables инициализирован и находится в скрытом элементе, у браузера нет каких-либо измерений, с помощью которых можно выдавать DataTables, и для этого потребуется в случае несоосности столбцов при включенной прокрутке.

Способ обойти это - вызвать функцию fnAdjustColumnSizing API .Эта функция рассчитает ширину столбцов, которая необходима, на основе текущих данных, а затем перерисует таблицу - это именно то, что нужно, когда таблица становится видимой в первый раз.Для этого мы используем метод 'show', предоставляемый таблицами пользовательского интерфейса jQuery.Мы проверяем, была ли создана таблица данных или нет (обратите внимание на дополнительный селектор для 'div.dataTables_scrollBody', он добавляется при инициализации таблицы данных).Если таблица была инициализирована, мы изменим ее размер.Оптимизации могут быть добавлены, чтобы изменить размер только первый показ таблицы.

Код инициализации

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

Видишь это для получения дополнительной информации.

Другие советы

Вам нужно будет настроить две переменные при инициализации таблиц данных: bAutoWidth и aoColumns.sWidth

Предполагая, что у вас есть 4 столбца шириной 50 пикселей, 100, 120 пикселей и 30 пикселей, вы бы сделали:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    });

Более подробную информацию об инициализации таблиц данных можно найти по адресу http://datatables.net/usage

Следите за взаимодействием между этим параметром ширины и CSS, который вы применяете.Вы могли бы прокомментировать свой существующий CSS, прежде чем попробовать это, чтобы увидеть, насколько близко вы подошли.

Ну, я не знаком с этим плагином, но не могли бы вы сбросить стиль после добавления datatable?Что -то вроде

$("#querydatatablesets").css("width","100%")

после вызова .DataTable?

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

У меня было множество проблем с шириной столбцов таблиц данных.Волшебным решением для меня было включение строки 

table-layout: fixed;

этот css соответствует общему css таблицы.Например, если вы объявили таблицы данных следующим образом:

LoadTable = $('#LoadTable').dataTable.....

затем волшебная строка css будет помещена в класс Loadtable 

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Решение TokenMacGuys работает лучше всего, потому что это результат ошибки в jQdataTable.Что произойдет, если вы используете $('#sometabe').DataTable().fnDestroy(), ширина таблицы будет установлена в 100 пикселей вместо 100%.Вот быстрое решение:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Установка ширины явно с использованием sWidth для каждого столбца И bAutoWidth: false в dataTable инициализация решила мою (аналогичную) проблему.Обожаю переполненную стопку.

Вы должны оставить хотя бы одно поле без фиксированного поля, например:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

Вы можете изменить все, но оставить только одно значение null, чтобы оно могло растянуться.Если вы нанесете ширину на ВСЕ, это не сработает.Надеюсь, я кому-нибудь помог сегодня!

Добавьте этот css-класс на свою страницу, это устранит проблему:

#<your_table_id> {
    width: inherit !important;
}

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Это отлично сработало для регулировки ширины всего стола.Спасибо @Peter Drinnan!

Как и в Datatable 10.1, это прямолинейно.Просто добавьте атрибут width к вашей таблице в HTML.т. е.width="100%", это переопределит все стили CSS, установленные DT.

Видишь это http://www.datatables.net/examples/basic_init/flexible_width.html

Ни одно из приведенных здесь решений не сработало для меня.Даже пример на домашняя страница таблиц данных не сработало, следовательно, из-за инициализации datatable в опции show.

Я нашел решение этой проблемы.Хитрость заключается в том, чтобы используйте опцию активировать для вкладок и для вызовите функцию fnAdjustColumnSizing() для видимой таблицы:

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Просто хочу сказать, что у меня была точно такая же проблема, как и у вас, хотя я просто применял jQuery к обычной таблице без какого-либо Ajax.По какой-то причине Firefox не расширяет таблицу после ее раскрытия.Я исправил проблему, поместив таблицу внутри DIV и применив вместо нее эффекты к DIV.

Вы делаете это в событии ready? 

$(document).ready(function() { ... });

Размер, скорее всего, будет зависеть от полной загрузки документа.

Для тех, у кого возникли проблемы с настройкой ширины таблицы / ячейки с помощью плагина fixed header:

Datatables использует теги ad для определения параметров ширины столбца.Это связано с тем, что это действительно единственный собственный html-код, поскольку большая часть внутреннего html-кода таблицы генерируется автоматически.

Однако происходит то, что некоторая часть вашей ячейки может быть больше ширины, хранящейся внутри ячеек thead.

То есть.если в вашей таблице много столбцов (широкая таблица), а в ваших строках много данных, то вызовите "sWidth".:изменение размера ячейки td не будет работать должным образом, потому что дочерние строки автоматически изменяют размер td на основе содержимого переполнения, и это происходит после таблица была инициализирована и ей были переданы параметры инициализации.

Оригинальная песня "sWidth":параметры переопределяются (сжимаются), потому что datatables считает, что ваша таблица по-прежнему имеет ширину по умолчанию %100 - она не распознает, что некоторые ячейки переполнены.

Чтобы исправить это, я вычислил ширину переполнения и учел ее, соответствующим образом изменив размер таблицы после таблица инициализирована - пока мы этим занимаемся, мы можем одновременно инициализировать наш фиксированный заголовок:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

создайте свой fixedheader внутри "успеха" вашего ajax-вызова, у вас не возникнет никаких проблем с выравниванием заголовка и строк.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}

Надеюсь, это поможет кому-то, кто все еще борется.

Не храните свой стол в каком-либо контейнере.Сделайте оболочку таблицы своим контейнером после рендеринга таблицы.Я знаю, что это может быть недопустимо в местах, где у вас есть что-то еще вместе с таблицей, но тогда вы всегда можете добавить это содержимое обратно.

Для меня эта проблема возникает, если у вас есть боковая панель и контейнер, который на самом деле является смещением к этой боковой панели.

$(YourTableName+'_wrapper').addClass('mycontainer');

(Я добавил панель panel-по умолчанию)
И твой класс : 

.mycontainer{background-color:white;padding:5px;}

найдите другую полезную ссылку об этой проблеме, и она решила мою проблему.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Таблица ширины силы таблиц данных

Я столкнулся с аналогичной проблемой, когда обернул div вокруг таблицы.

Добавление позиции:родственник починил это для меня.


#report_container {
 float: right;
 position: relative;
 width: 100%;
}

У меня была аналогичная проблема, когда содержимое таблицы было больше, чем верхний и нижний колонтитулы таблицы.Добавление div вокруг таблицы и установка x-overflow, похоже, устранили эту проблему:

Убедитесь, что все остальные параметры перед bAutoWidth и aoColumns введены правильно.Любой неправильный параметр, указанный ранее, нарушит эту функциональность.

у меня была похожая проблема, и я обнаружил, что текст в столбцах не разбивается, и использование этого css-кода решило проблему

th,td{
max-width:120px !important;
word-wrap: break-word
}

Это мой способ делать это..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Сегодня я столкнулся с той же проблемой.

Я использовал хитрый способ решить эту проблему.

Мой код, как показано ниже. 

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Это работает нормально.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top