jquery datatable - 表头宽度与Laravel中的正文宽度不对齐

Posted 2023-05-07

【中文标题】jquery datatable - 表头宽度与Laravel中的正文宽度不对齐

【英文标题】：jquery datatable - the table header width not aligned with the body width in Laravel

【发布时间】：2020-12-09 23:29:55

【问题描述】：

我在我的 Laravel-5.8 项目中使用 jQuery 表头

          <div class="card-body">
            <div id="accordion">
              <!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
              <div class="card  card-secondary">
                <div class="card-header">
                  <h4 class="card-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                      Internal Respondents
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">

<div class="card-body">
    <div class="table-responsive">
        <table id="myTable" class=" table table-bordered table-striped table-hover datatable datatable-internal">
            <thead>
                <tr>

                    <th >
                        #
                    </th>
                    <th  >
                        Respondent
                    </th>
                    <th  >
                        Department
                    </th>          
                    <th  >
                        Date
                    </th>  
                    <th  >
                        Status
                    </th>                          
                    
                    <th  >
                        &nbsp;
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach($skills as $key => $skill)
                    <tr>
                        <td>
                            $key+1
                        </td>
                        <td>
                            $skill->skill_name ?? '' 
                        </td>
                        <td>
                            $skill->description ?? '' 
                        </td>
                        <td>
                            $skill->skill_name ?? '' 
                        </td>
                         <td>
                             $skill->description ?? '' 
                        </td>
                        <td>

                        </td>                            
                                           
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div> 


                  </div>
                </div>
              </div>   

我正在使用 JQuery 数据表，如下所示。

javascript

<script src=" asset('theme/adminlte3/plugins/datatables/jquery.dataTables.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-buttons/js/dataTables.buttons.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-select/js/dataTables.select.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.flash.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.html5.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.print.min.js') "></script>
<script src=" asset('theme/adminlte3/plugins/datatables-buttons/js/buttons.colVis.min.js') "></script>  

<script>
 $(document).ready(function() 
    $('#myTable').DataTable(
        stateSave: true,
    "pageLength": 10,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    );
 );
</script>

当我渲染页面时，标题宽度与正文不对齐。看起来是这样的：

[![数据表][1]][1]

如何让数据表在页面加载时自动对齐？

谢谢。

当我添加时

<script>
$(document).ready(function()
   $('#example1-tab1-dt').DataTable(
      columns: [
          width: '20%' ,
          width: '20%' ,
          width: '20%' ,
          width: '10%' ,
          width: '15%' ,
          width: '15%' 
      ]
   );

   $('#example1-tab2-dt').DataTable(
      columns: [
          width: '20%' ,
          width: '20%' ,
          width: '20%' ,
          width: '10%' ,
          width: '15%' ,
          width: '15%' 
      ]
   );
   
   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust();
   );   
);    
</script>

我收到了这个弹出窗口：

DataTables 警告：table id=example1-tab1-dt - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3 [1]：https://i.stack.imgur.com/RCMmB.png

【问题讨论】：

对于laravel-datatables，最好的办法是使用yajrabox.com/docs/laravel-datatables/master/installation官方的laravel数据表库。

请参考this $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); 当表格可见时它与正文对齐

如果你用这个style="width : 100%"那么呢？

【参考方案1】：

您的标题会随着数据内容的变化而变化。由于您目前没有数据，jquery 无法计算标题项的宽度。

关于其他问题的更多信息：datatable jquery - table header width not aligned with body width

【讨论】：

按照您的指示进行操作。我已经用新的弹出窗口更新了我的代码 - DataTables 警告：table id=example1-tab1-dt - Cannot reinitialise DataTable。有关此错误的更多信息，请参阅datatables.net/tn/3

"Nickvanderwaal - 我正在使用手风琴