There is some design. Data tables functionality working fine but on after reloading table header shr-CodePudding

Its link for reloading page Its link for after clicking table head

this is my JavaScript code and My footer references and Header references. Issue is with my design on first place it showing bug design but when I click on header its showing the right design.

<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&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>```

CodePudding user response：

From research on the issue, this is happening because you have scrollY enabled, but do not enable scrollX.

If you are using vertical scrolling (scrollY) and not horizontal scrolling (scrollX), enable the horizontal scrolling option so the table has space to scroll into.

After you enable the scrollX option, add the following to your CSS stylesheet:

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;900&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>

Another work around, would be to use the columns.adjust() reference documented here on the DataTables website.

What this recalculate the column widths of the table. Make sure you call the table.columns.adjust().draw(); after your table initialization

$(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();
    });