Заголовок JQuery Datatable не выровнен с телом?
У меня есть набор данных, которые должны отображаться в JQuery Datatables с параметрами для фильтрации и прокрутки без потери заголовков столбцов. Пока все функции работают, но есть проблема с заголовком столбца. Если вы щелкните ссылку и проверьте пример запуска, вы увидите проблему. Заголовок столбца находится слева, а тело - по центру. Я попытался исправить эту проблему и изменить свой HTML-код, удалив некоторые атрибуты таблицы JQuery, но все равно безуспешно. Пожалуйста, если кто-нибудь знает, как решить эту проблему, или если есть какие-либо проблемы с моим кодом, пожалуйста, сообщите мне об этом. Вот пример:
$('#btnGet').on('click', function() {
buildTable();
});
var dataTable;
function GenerateTable(tblID) {
// Setup - add a text input to each footer cell
$('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead');
$('#rptTbl thead tr:eq(1) th').each(function(i) {
//var title = $(this).text();
$(this).html('<input type = "text" placeholder = "Search" />');
$('input', this).on('keyup change', function() {
if (dataTable.column(i).search() !== this.value) {
dataTable.column(i).search(this.value).draw();
}
});
});
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
language: {
"emptyTable": "No records were found."
}
});
}
function buildTable() {
var htmlTbl = '<table id = "rptTbl" class = "table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>';
$('#rptData').empty().append(htmlTbl);
GenerateTable('rptTbl');
}<!DOCTYPE html>
<html>
<head>
<title>Test JQuery Datatables</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: CSS for DataTables. *** -->
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel = "stylesheet" type = "text/css" href = "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: CSS for DataTables. *** -->
<script language = "javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language = "javascript" src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** -->
</head>
<body>
<div class = "container">
<div id = "report_filters" class = "collapse in">
<div class = "row">
<div class = "form-group col-xs-10 col-sm-5 col-md-3 col-lg-3">
<button type = "button" id = "btnGet" class = "btn btn-primary btn-block" data-toggle = "collapse" data-target = "#report_data,#report_filters">Get Report</button>
</div>
</div>
</div>
<div id = "report_data" class = "collapse">
<div class = "row">
<div class = "form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#report_data,#report_filters">
<span class = "glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<div id = "rptData" class = "table-responsive"></div>
</div>
</div>
</body>
</html>@ D.Smania Я смог обнаружить то же самое, но без решения, если они включены. Что-то не так в таблицах данных css.
Просто предупреждение: если вы интегрируете Datatables с Bootstrap, тогда вы должны включить всю поддержку Бутстрап, а не JQuery UI, возможно, это источник проблем. Прочтите: Интеграция с бутстрапом. То же самое и с расширением кнопок.
@ D.Smania Можете ли вы указать, что именно не работает с библиотеками, которые я включил? Есть ли у меня ненужные или отсутствующие?
Я действительно уверен, что то, что вы делаете, неправильно или нет, но для Bootstrap плагин Datatables имеет свой набор таможенных стилей CSS вместо, например: <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />, который является одним из стилей JQuery UI. Поскольку вы используете Bootstrap, я думаю, что это более логично для использования: <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />, не более того. То же самое применимо к замене других источников, связанных с JQueryUI.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Добавить функцию drawCallback в опциях dataTable
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
drawCallback: function( settings ) {
// Reset margin to 0 after datatable render
var ele = document.querySelector('.dataTables_scrollBody');
if (ele){
ele = ele.querySelector('.dataTable');
if (ele){
ele.style.margin = 0;
}
}
},
language: {
"emptyTable": "No records were found."
}
});
Это устранило проблему. Я замечаю, что таблица выровнена по левому краю. В моем примере тело было по центру, а голова - слева. Есть ли способ центрировать стол? Также не могли бы вы уточнить, почему возникла эта проблема и что именно сделала маржа для ее устранения?
Не знаю, но почему-то jquery ui css испортил css по умолчанию для данных.
Справедливо. Спасибо.
Я исследовал вашу проблему, эти опции вызывают ваши проблемы:
scrollX: true, scrollY: "400px", scrollCollapse: true. Если вы прокомментируете их все, вы увидите свою таблицу по центру. Однако я не нашел хорошего решения для решения проблем, которые создает эта опция.