Question

我已将边栏添加到表所在的View之一。我正在为此表使用datatables插件。

侧边栏可以切换或隐藏。隐藏侧边栏时出现问题。表主体的大小可以正确调整，但标头则不能。我可以通过单击它来调整标题。通过调整大小，我的意思是我这样更改父级width：

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

我在下面提供代码段。您需要进入整页模式才能看到我的问题。

我了解到columns.adjust()函数可能会有所帮助，但没有帮助。我没有其他想法如何解决它。

如何调整表格标题的大小或将其调整为tbody的宽度？

$(document).ready(function () {

            var table = $('#testtable').DataTable({
                scrollY: 500,
                searching:false,
                paging:false
                //fixedHeader: {
                //    header: true,
                //    headerOffset: 230
                //}
            });

            $("#close-sidebar").click(function () {
                $(".page-wrapper").removeClass("toggled");
                //table.columns.adjust(); have tried this but does not work  
            });
            $("#show-sidebar").click(function () {
                $(".page-wrapper").addClass("toggled");
                //table.columns.adjust(); have tried this but does not work 
            });

        });

html, body {
    height: 100%;
    overflow-x: hidden;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    margin: auto auto;
}

.table tr {
    cursor: pointer;
}


tr {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.page-content {
    height: 100%;
}

#task-wrapper {
    z-index: 1;
    background: white;
    width: 100%;
    height: 200px;
}

.tasks-list {
    position: absolute;
    overflow-y: hidden;
    width: 100%;
}

    .page-wrapper .theme {
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 4px;
        margin: 2px;
    }

        .page-wrapper .theme.chiller-theme {
            background: #1e2229;
        }

    /*----------------toggled sidebar----------------*/

    .page-wrapper.toggled .sidebar-wrapper {
        left: 0px;
    }

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 300px;
    }

        .page-wrapper.toggled .page-content .tasks-list {
            width: -webkit-calc(100% - 300px);
            width: -moz-calc(100% - 300px);
            width: calc(100% - 300px);
        }
}

body {
    font-size: 0.9rem;
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
    color:white;
}


/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}

    .page-wrapper .page-content > div {
        padding: 20px 40px;
    }

.page-wrapper .page-content {
    overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
    <i class="fas fa-bars"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper bg-dark">
      <div class="sidebar-content">
        <div id="close-sidebar">
          <i class="fas fa-times">CLOSE</i>
        </div>
      </div>
  </nav>
  <!-- sidebar-wrapper  -->
  <main class="page-content bg-light">
    <div class="row tasks-list">
      <div class="col">
        <div id="result">
          <table id="testtable" class="table display" style="width:100%;">
            <thead class="bg-light">
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
              </tr>
            </thead>
            <tbody>
              <tr id="10749" role="row" class="odd">
                <td class="sorting_1">10749</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14581" role="row" class="even">
                <td class="sorting_1">14581</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14794" role="row" class="odd">
                <td class="sorting_1">14794</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14950" role="row" class="even">
                <td class="sorting_1">14950</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="15128" role="row" class="odd">
                <td class="sorting_1">15128</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
</div>

Answer 1

只需将其添加到您的CSS中：

Test<Integer> y = new Test(String.class); // works fine at both compile time and runtime, runtime error occurs when calling another method that relies on the generic type parameter

//Test<Integer> x = Test.create(String.class); // does not compile

这将始终使tr适合整个表格宽度！

隐藏侧边栏时，Datatables表头未调整大小

1 个答案: