Question

我有主页，当用户单击链接按钮时，它应该打开带有学生详细信息的弹出模型。表格格式的所有详细信息。如果他们想向上滚动表，则标题应保留，仅行应移动。

我在Jquery中使用 scrollY：true 和固定标头true 完成了此操作。问题是启用此代码后。标头未与主体列固定。如果删除scrolly：true，则工作正常。

如果我搜索某些东西，它会立即对齐，就像我对任何列进行排序然后立即对齐一样。主要问题是表单加载时间与标题和正文不对齐

主页

<div class="modal-body">
  @Html.Partial("_SubtoolPage")
</div>

模型弹出代码

<div>
<div class="panel-body modelpopup-scroll">
  <table id="StudTask" class="table-striped table table-bordered ">
    <thead>
     <tr>
     <th>ID</th>
    <th>Name</th>
   <th>Marks</th>
  </tr>
 </thead>

 <tbody>
   fetch row code.......
 </tbody>
</table>
</div>
</div>

脚本代码

<script>
$(document).ready(function () {
var table= $('#StudTask').dataTable({
"fixedHeader": true,
"scrollCollapse": true,
"scrollY": "600px",
"scrollX": "100%",
"paging": false,
"order": [[2, 'asc']]
});
}
</script>

我也尝试了以下方法

 //$('#RealTask').DataTable().columns.adjust();
 //$("#RealTask").DataTable().search("ss").draw();

我也提到了此链接：

Link referred to

我已尝试过所有方法，但无法解决。请问您是否有更好的主意。

谢谢！

Answer 1

您尝试过从上层DIV中删除这两个类“ panel-body modelpopup-scroll”。

希望您能解决此问题。如果不只是在表绑定后调用$(window).trigger('resize');。

赞：

setTimeout(function(){ $(window).trigger('resize'); }, 500);

jQuery datatable标头与正文不对齐

1 个答案: