Я с помощью jQuery объекты DataTable. При запуске приложения, ширина заголовка не совпадает с шириной тела. Но когда я нажимаю на заголовок, он становится выравниванием по ширине тела, но даже тогда есть некоторые небольшой перекос. Эта проблема возникает только в IE.
[JSFiddle][1]
Вот как это выглядит, когда страница загружается:
После нажатия на заголовок:
Мой объект DataTable код:
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]
});
"тарифы" - это мой ID в таблице. Может кто-нибудь помочь мне с этим? Спасибо заранее.
Скорее всего, ваш столик изначально скрыты, что предотвращает библиотека jQuery объекты DataTable из расчета ширины столбцов.
Например, для плагина крах ушко:
$('#myCollapsible').на('показаны.БС.распад', функция () { $($.ФН.объект DataTable.столы(правда)).Объект DataTable() .столбцы.отрегулировать(); });
Например, на вкладке загрузки плагинов:
$('а[данные-тумблер="в разделе", у]').на('показаны.БС.вкладка', функция(е){ $($.ФН.объект DataTable.столы(правда)).Объект DataTable() .столбцы.отрегулировать(); });
Выше код настраивает ширину столбцов для всех таблиц на странице. Смотрите столбцов().настройка()
методы API для получения дополнительной информации.
Если вы're, используя отзывчивый, скроллер или расширения FixedColumns, вам нужно использовать дополнительные методы API, чтобы решить эту проблему.
Если вы're, используя отзывчивый расширением, вам нужно позвонить отзывчивый.пересчета()
метод API кроме того для столбцов().настройка()
метод API. См. отзывчивый расширения – неправильные breakpoints пример.
Если вы're, используя расширение скроллер, вам нужно позвонить скроллер.мера()
метод API вместо столбцов().настройка()
метод API. См. расширение скроллер – неправильные ширины столбцов или отсутствует data пример.
Если вы're, используя расширение FixedColumns, вы должны позвонить fixedColumns().перерасположение()
метод API кроме того для столбцов().настройка()
метод API. См. расширение FixedColumns – неправильные widths колонки пример.
См. библиотека jQuery объекты DataTable – ширина столбца проблем с Bootstrap вкладки для решения наиболее распространенных проблем, с колоннами в jQuery объекты DataTable, когда таблица изначально скрыто.
Я решил эту проблему, обернув в "объект DataTable" в таблицы с див
с переполнение:авто
:
.dataTables_scroll
{
overflow:auto;
}
и добавив это JS после ваш объект DataTable` инициализации:
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
Дон'т использовать sScrollX " или " sScrollY
, удалить их и добавить див
оболочку самостоятельно, который делает то же самое.
Я починил, работает для меня.
var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
Или
var table = $('#example').DataTable();
table.columns.adjust().draw();
Ссылка: https://datatables.net/reference/api/columns.adjust()
Ни один из вышеупомянутых решений работал для меня, но в конце концов я нашел решение, сделал.
Моя версия этого вопроса была вызвана сторонним CSS-файл, установить 'коробка-размеров' другое значение. Я был в состоянии исправить эту проблему без воздействия на другие элементы С ниже код:
$table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");
Надеюсь, что это помогает кто-то!
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]}).fnAdjustColumnSizing( false );
Попробуйте позвонить на fnAdjustColumSizing(ложь) в конец таблицы DataTable звонок. измененный код выше.
вопрос таблицы данных называется таблица данных будет обращено на дом,использовать установить тайм-аут, прежде чем называть таблицей данных.
setTimeout(function(){
var table = $('#exampleSummary').removeAttr('width').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
columnDefs: [
{ width: 200, targets: 0 }
],
fixedColumns: false
} );
}, 100);
Связать ответ с Майк Рэмси в конце концов я обнаружил, что таблица была инициализирована раньше дом был загружен.
Чтобы это исправить я поставил функцию инициализации в следующем месте:
document.addEventListener('DOMContentLoaded', function() {
InitTables();
}, false);
Просто оберните элемент тег table в DIV с overflow auto и положение относительно. Он будет работать в Chrome и IE8. Я'ве добавил высоты 400 пикселей, чтобы сохранить таблица размеров исправлена даже после перезагрузки данных.
table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
//"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
//"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
"sAjaxSource": "datass.php",
"aoColumns": colf,
"bJQueryUI": true,
"sPaginationType": "two_button",
"bProcessing": true,
"bJQueryUI":true,
"bPaginate": true,
"table-layout": "fixed",
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
oSettings.jqXHR = $.ajax({
"dataType": 'JSON',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
$(nRow).click(function() {
$(".row_selected").removeClass("row_selected");
$(this).addClass("row_selected");
//mostra il detaglio
showDetail(aData.CandidateID);
});
},
"fnDrawCallback": function(oSettings) {
},
"aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
Ни один из вышеупомянутых решений работал для меня, поэтому я'выложу мое решение: я был загрузке таблицы в скрытый div и затем показывать див после того, как таблица была построена. Когда я показал/unhid первый div и затем построил таблицу, а таблица была видна, он работал.
Так что объекты DataTable может'т размер колонок в скрытом div, вероятно, потому, что он становится шириной столбца 0px на backend, если таблица скрыта.
не нужно придумывать различные костыли, заголовок таблицы, ширина не совпадает с телом, потому что из-за того, что в таблице не было достаточно времени, чтобы заполнить данные для этого метода setTimeout
setTimeout(function() {
//your datatable code
}, 1000);
Как сказал Gyrocode.com на "скорее всего, ваша таблица изначально скрыты, что предотвращает библиотека jQuery объекты DataTable из расчета ширины столбцов.&и"
У меня тоже такая проблема и решил ее просто инициализации объекта DataTable после показа див
Например
$('#my_div').show();
$('#my_table').DataTable();
Используйте эти команды
$('#rates').DataTable({
"scrollX": true,
"sScrollXInner": "100%",
});
Передо мной стоял тот же вопрос. Я добавил scrollX: истинная собственность для DataTable и это сработало. Нет необходимости изменять CSS для DataTable
jQuery('#myTable').DataTable({
"fixedHeader":true,
"scrollY":"450px",
"scrollX":true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"scrollCollapse": true
});
Я знаю, что это старый, но я просто столкнулся с проблемой и ничего'т найти отличное решение. Так что, я решил использовать некоторые JS, чтобы получить scrollBody'ы высота, по сравнению с таблицами высоту. Если scrollBody меньше, чем в таблице, то я увеличу столы шириной 15px с учетом полосы прокрутки. Я поставил на событие resize тоже, так что это работает, когда мой контейнер изменения размеров:
const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();
if (tableHeight > scrollBodyHeight) {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "calc(100% + 15px)",
})
} else {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "100%",
})
}
$('.DataTables_sort_wrapper').триггер("и нажмите");
К сожалению, ни одно из этих решений работал для меня. Возможно, из-за разницы в инициализации нашей таблицы, мы имеем разные результаты. Возможно, что одним из этих решений будет работать для кого-то. В любом случае, хотел поделиться своим решением, в случае, если кто-то все-таки беспокоит этот вопрос. Это немного программистские, но это работает для меня, так как я Дон't изменить ширину таблицы позже.
После того, как я загрузить страницу и нажмите на заголовок, так что он расширяется и нормально показывает, я проверяю заголовка таблицы и запишите ширину .dataTables_scrollHeadInner
див. В моем случае это 715px
, например. Затем добавить ширину в CSS:
.dataTables_scrollHeadInner
{
width: 715px !important;
}
Мое решение было добавить это: ...
initComplete () {
this.api (). columns (). header (). each ((el, i) => {
$ (el) .attr ('style', 'min-width: 160px;')
});
},
...
и это выглядело нормально.