Блог

Главная - Вопросы по программированию - Есть какой-то дизайн. Функциональность таблиц данных работает нормально, но после перезагрузки заголовок таблицы сжимается, но когда я нажимаю на таблицу, все в порядке, тогда

Есть какой-то дизайн. Функциональность таблиц данных работает нормально, но после перезагрузки заголовок таблицы сжимается, но когда я нажимаю на таблицу, все в порядке, тогда

#javascript #c# #ajax #asp.net-core #datatables

Вопрос:

Его ссылка для перезагрузки страницы
Его ссылка для после нажатия на заголовок таблицы

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

 <link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900amp;display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">



$(document).ready(function () {
        $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollCollapse: true,
            scroller: true,
        });
    });```

```<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/libt/signalr/dist/browser/signalr.js"></script>```

Ответ №1:

Из исследований по этой проблеме следует, что это происходит потому, что вы включили scrollY, но не включили scrollX.

Если вы используете вертикальную прокрутку (scrollY), а не горизонтальную прокрутку (scrollX), включите опцию горизонтальной прокрутки, чтобы в таблице было место для прокрутки.

После включения этой scrollX опции добавьте следующее в свою таблицу стилей CSS:

 table.dataTable tbody th,
table.dataTable tbody td {
    white-space: nowrap;
}
 
 $(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });
    }); 
 <head>
<!--Styles-->
<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900amp;display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />

<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">
<!--Scripts-->
<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
</head>

Еще один обходной путь-использовать columns.adjust() ссылку, задокументированную здесь, на веб-сайте DataTables.

Для этого пересчитайте ширину столбцов таблицы. Убедитесь, что вы позвонили table.columns.adjust().draw(); после инициализации таблицы

 $(document).ready(function () {
       var table = $('#draft-data-table').DataTable({
            processing: true, // for show progress bar  
            serverSide: false, // for process server side  
            filter: true, // this is for disable filter (search box)  
            orderMulti: false, // for disable multiple column at once  
            "pagingType": "full_numbers",
            pageLength: 5,
            lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
            deferRender: true,
            paging: true,
            scrollY: 200,
            scrollX: true,
            scrollCollapse: true,
            scroller: true,
        });

table.columns.adjust().draw();
    });

Комментарии:

1. ЕСЛИ этот ответ помог, пожалуйста, поддержите 🙂

Метки: , , , ,