Datatable-ResizeColumns

by supernova404

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.0.0/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.0.0/css/searchBuilder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.0/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/colreorder/1.5.0/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.bootstrap.css">
<script...

CSS

/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

html, body {
    min-height: 100%;
    height: 100%;
    font-size: 14px !important;
}

body {
    background-color: #f8f8f8 !important;
}

a {
    color: #03b8e1 !important;
}

div.top {
    position: sticky !important;
    top: 0 !important;
    z-index: 2;
    background-color: white;
    padding-bottom: 100px;
}

.context-menu-list{
    z-index: 100000 !important;
}

.pagination > li > a, .pagination > li > span {
    border-radius: 0 !Important;
    -webkit-border-radius: 0 !Important;
    -moz-border-radius: 0 !Important;
    /*-ms-border-radius: 0 !Important;
    -o-border-radius: 0 !Important;*/
    color: black !important;
    background: #efefef !Important;
    color: black !Important;
    border: none !important;
    margin-right: 2px;
}

html body table.dataTable tbody tr.selected {
    background-color: rgba(64, 98, 93, 0.40) !important; /*#008F7D !important;*/ /*#b4dbae    rgba(0, 143, 125, 0.45) */
    /*    color: white !important;*/
}

table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 1px !important;
}

html table.dataTable tbody tr {
    border: 1px solid #e5e5e5 !important;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background: #008F7D !Important;
    color: white !important;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.logginnContainer {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
}

    .logginnContainer .logo-alt {
        display: none;
    }

    .logginnContainer .logo {
       ...

JavaScript

$(function() {
  $(document).ready(function() {
    var reorder = true;
    var table = $('#dynamicTableDetailChild').DataTable({
      //dom: 'Qlfrtip',
      dom:'<"top"Bfrip>rt<"bottom"ip><"clear">', //dom: 'Bfrtip',
      searchBuilder: true,
      autoWith: false,
      responsive: true,
      colReorder: true,
      stateDuration: 0,
      //scrollY: '60vh',
      //scrollCollapse: true,
      //scrollX: '100%',

      pageLength: 10, //for setting the default page length
            lengthMenu: [
                [10, 25, 50, 100, 300],
                ['10', '25', '50', '100', '300']
            ],
            order: [],
            //select: {
            //    style: 'single'
            //},
      retrieve: true,
      select: true,
    //  columnDefs: [
       // { visible: false, targets: 0, className: 'noVis', orderable: false },
       // { visible: true, targets: 1, className: 'noVis', orderable: true },
       // { visible: true, targets: 2, className: 'noVis', orderable: true }
      //],
       keys: true,
       buttons: [
                //{
                //    extend: 'excelHtml5',
                //    text: 'Excel',
                //    exportOptions: {
                //        //page: 'current', //If only to export current page
                //        columns: ':visible',
                //        format: {
                //            body: function (data, row, column, node) {
                //                data = $('<p>' + data + '</p>').text();
                //                return $.isNumeric(data.replace(',', '.')) ? data.replace(',', '.') : data;
                //            },
                //            header: function (text, index, node) {
                //                header_txt = $('<p>' + text + '</p>').text();
                //                return header_txt.slice(0, -1);
                //            }
                //        }
                //    }
                //},
                {
          ...