CODEWITHSUNDEEP
javascriptjqueryhtmlcssc#-4.0
SENA
SENA

Reputation: 119

Jquery datatable header not aligned with body with

I have the main page when a user clicks link button it should open model pop up with student details. All the details in table format. If they want to scroll up the table, the header should stay, only rows should move.

I have done this using scrollY: true and fixed header true in Jquery. The problem is after enabling this code. header not fixed with body column. If remove scrolly: true it is working fine.

If I search something it is aligned immediately, the same way if I sorting any column then immediately aligned. The main problem is when form loading time it is not aligned with the header and body

Main Page

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

Model Pop up Code

<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 Code

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

I have tried below methods also

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

and I have referred to this link also:

Link referred to

Everything I have tried but I'm not able to solve. Could you please suggest if you have a better idea.

Thanks!

Upvotes: 0

Views: 1659

Answers (1)

Debabrata Khanra
Debabrata Khanra

Reputation: 36

Did you try with removing those two class "panel-body modelpopup-scroll" from upper DIV.

Hope you fix this issue .If not just call $(window).trigger('resize'); after table binding.

Like : 

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

Upvotes: 2

Related Questions