Когда я пытаюсь использовать фиксированные заголовки в таблицах данных, они ломаются. Т.е. я указываю, что мой фиксированный заголовок должен быть заголовком:
fixedHeader: {
header: true,
}
Но я все равно получаю фиксированный заголовок внизу, который нарушает мой макет
Код для моей инициализации с датой:
var qhse = function () {
//
// Setup module components
//
// Basic Datatable examples
var _componentDatatableBasic = function () {
if (!$().DataTable) {
console.warn('Warning - datatables.min.js is not loaded.');
return;
}
//Setting datatable defaults
$.extend($.fn.dataTable.defaults, {
autoWidth: false,
responsive:true,
columnDefs: [{
orderable: false,
width: 100,
targets: [8,9,10]
}],
colReorder: false,
dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
searchPlaceholder: 'Type to filter...',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '←' : '→', 'previous': $('html').attr('dir') == 'rtl' ? '→' : '←' }
}
});
var table = $('.qhse').DataTable({
drawCallback: function () {
$('[data-toggle="popover"]').popover({
title: setData,
html: true,
placement: 'right',
container: 'body',
//data: setData,
});
},
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
//colReorder: {
// fixedColumnsLeft: 1
//},
stateSave: true,
orderCellsTop: true,
fixedHeader: {
header: true,
},
keys: {
className: 'focus focus-success'
},
buttons: {
buttons: [
{
extend: 'copyHtml5',
className: 'btn btn-light',
title: 'QHSE Data export',
exportOptions: {
columns: ':visible :not(.not-export-column)'
},
},
{
extend: 'excelHtml5',
className: 'btn btn-light',
title: 'QHSE Data export',
exportOptions: {
columns: ':visible :not(.not-export-column)'
},
},
{
extend: 'pdfHtml5',
className: 'btn btn-light',
title: 'QHSE Data export',
exportOptions: {
columns: ':visible :not(.not-export-column)'
},
},
{
extend: 'csvHtml5',
className: 'btn btn-light',
title: 'QHSE Data export',
exportOptions: {
columns: ':visible :not(.not-export-column)'
},
},
{
extend: 'colvis',
text: '<i class="icon-three-bars"></i>',
className: 'btn bg-blue btn-icon dropdown-toggle'
}
]
}
});
// Adjust columns on window resize
setTimeout(function () {
$(window).on('resize', function () {
table.columns.adjust();
});
}, 100);
};
// Select2 for length menu styling
var _componentSelect2 = function () {
if (!$().select2) {
console.warn('Warning - select2.min.js is not loaded.');
return;
}
// Initialize
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth: true,
width: 'auto'
});
};
//
// Return objects assigned to module
//
return {
init: function () {
_componentDatatableBasic();
_componentSelect2();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function () {
qhse.init();
});
HTML-код таблицы:
<table class="table table-bordered table-striped table-hover qhse">
<thead>
<tr>
<th>
Sl No
</th>
@*<th style="width:150px;min-width:150px; max-width:150px;">
@Html.DisplayNameFor(model =>
model.First().QHSE_name)
</th>*@
<th>
@Html.DisplayNameFor(model =>
model.First().Activity_name)
</th>
<th>
@Html.DisplayNameFor(model =>
model.First().Planned_date)
</th>
<th>
@Html.DisplayNameFor(model => model.First().Target_date)
</th>
<th>
@Html.DisplayNameFor(model => model.First().Actual_date)
</th>
<th>
@Html.DisplayNameFor(model => model.First().Status)
</th>
<th>
@Html.DisplayNameFor(model => model.First().Remarks)
</th>
<th>
@Html.DisplayNameFor(model =>
model.First().Person_responsible)
</th>
<th class="not-export-column">Edit</th>
<th class="not-export-column">Active Status</th>
@if (ViewBag.DeleteFlg != null && ViewBag.DeleteFlg == true)
{
<th class="not-export-column">Delete </th>
}
</tr>
</thead>
<tbody>
@if (Model != null && Model.Count() > 0)
{
int i = 0;
foreach (var item in Model)
{
i = i + 1;
<tr>
<td>
@Html.ActionLink(i.ToString(),
"QHSEPlannerDetails", new { id_qhse = item.id_qhse.ToString() }, new {
data_toggle = "popover", data_trigger = "hover", id = item.id_qhse,
onclick = "HyperLinkProgressIconFunction()" })
</td>
<td>
@Html.DisplayFor(model => item.Activity_name)
</td>
<td>
@if (item.Planned_date > Convert.ToDateTime("01/01/0001"))
{
@item.Planned_date.ToString("dd/MM/yyyy")
}
</td>
<td>
@if (item.Target_date > Convert.ToDateTime("01/01/0001"))
{
@item.Target_date.ToString("dd/MM/yyyy")
}
</td>
<td>
@if (item.Actual_date > Convert.ToDateTime("01/01/0001"))
{
@item.Actual_date.ToString("dd/MM/yyyy")
}
</td>
<td>
@Html.DisplayFor(model => item.Status)
</td>
<td>
@Html.DisplayFor(model => item.Remarks)
</td>
<td>
@Html.DisplayFor(model => item.Person_responsible)
</td>
<td>
<a href='@Url.Action("QHSEPlannerEdit", "QHSEPlanner", new { id_qhse = item.id_qhse })' title="Edit QHSE Planner" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
<td class="text-center">
<a href='@Url.Action("QHSEPlannerActiveStatus", "QHSEPlanner", new { id_qhse = item.id_qhse })' title="Add Active status" onclick="HyperLinkProgressIconFunction()">
<div class="list-icons">
<i class="icon-menu9"></i>
</div>
</a>
</td>
@if (ViewBag.DeleteFlg != null && ViewBag.DeleteFlg == true)
{
<td>
@*<img src="@Url.Content("~/Images/delete.png")" />*@
<span class="badge badge-danger" title="Delete QHSE Planner" onclick="DeleteItems(@item.id_qhse)" style="cursor:pointer;">Delete</span>
</td>
}
</tr>
}
}
else
{
<tr>
<td colspan="10">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
с использованием фиксированных столбцов нарушает его еще больше.