Jquery datatable column headers width issue with vertical scroll

Question

I m working with datatables for the first time and got struck with the below explained issue.. Whenever i m trying to include vertical scroll , column headers losses all itz alignment, all the column width reduces and as a result will get header row who's length is half of the entire table.

One more thing i ve noticed is that, in the th class style width is coming as 0px, can any one pls temme why it's coming so ? js part i ve included,

$(document).ready(function() {

                $.ajax({
                    type : "GET",
                    url :"",

                    dataType : "json",
                    success : function(data) 
                    {
                            $('#customers').dataTable(
                            {
                            "aaData":data.response,
                            "aoColumns": [
                            { "sTitle": "Rendering Engine", "bSortable": false},
                            { "sTitle": "Broswers", "bSortable": false },
                            { "sTitle": "Platform", "bSortable": false }
                            ],
                         "sScrollY": "250px",
                        "iDisplayLength": 200,
                        "bFilter": false,
                        "bLengthChange": false,
                        "bAutoWidth": false
                           });
                    }   
                });
            });

and html part

<table id="customers"></table>

Thanks in Advance !

If it's not just a typo, you've messed up with the quotes ? Three quotes in 'url' will start a new string that now inludes dataType etc... — adeneo
– adeneo, Commented Jul 23, 2012 at 7:15

Sharjeel Ahmed · Accepted Answer · 2013-08-17 18:52:07Z

4

I solved this problem by wrapping the "dataTable" Table with a div with overflow:auto

.dataTables_scroll
{
    overflow:auto;
}

and add this JS after your dataTable initialization

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

Dont use sScrollX or sScrollY, remove then and add a div wrapper yourself which does the same thing.

answered Aug 17, 2013 at 18:52

Sharjeel Ahmed

2,0612 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anupal Over a year ago

For printing issue also add @media print{ .dataTables_scroll{overflow:visible!important;} }

kylealonius Over a year ago

This doesn't work, as now the header is part of the single table and will scroll with the rest of the table body.

Gopal · Accepted Answer · 2012-07-23 08:01:29Z

0

    success : function(data) 
                {
                        $('#customers').dataTable(
                        {
                        "aaData":data.response,
                        "aoColumns": [
                        { "sTitle": "Rendering Engine", "bSortable": false},
                        { "sTitle": "Broswers", "bSortable": false },
                        { "sTitle": "Platform", "bSortable": false }
                        ],
                     "sScrollX": "100%",
                     "sScrollY": "250px",
                    "iDisplayLength": 200,
                    "bFilter": false,
                    "bLengthChange": false,
                    "bFilter": true,
                    "bSort": true,
                    "aLengthMenu": [50,100,250,500],
                    "sPaginationType": "full_numbers"
                       });
                }   





  //use this style
 <style type="text/css">

       .dataTables_length {
       float: left;
       width: 40%;
        }

    .dataTables_filter {
      float: right;
      text-align: right;
      width: 50%;
      } 

  .dataTables_info {
   float: left;
   width: 50%;
  vertical-align: middle;
  /*min-height: 100%;*/
  /*position: absolute;*/
  }
</style>

answered Jul 23, 2012 at 8:01

Gopal

2171 gold badge4 silver badges18 bronze badges

1 Comment

Diya4ever Over a year ago

The problem with the column headers is that ..once the scroll is added ,the column headers are coming as a table of width 0px.. I m getting confused of how to manage the styles of tht table

Flater · Accepted Answer · 2012-09-04 08:59:24Z

0

The problem is that your table is empty. I've seen similar issues in the past, they were always caused by your table not having a <thead> / <tbody>.

Change your HTMl to:

<table id="customers">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

Let me know what happens.

answered Sep 4, 2012 at 8:59

Flater

14.1k4 gold badges45 silver badges67 bronze badges

Collectives™ on Stack Overflow

Jquery datatable column headers width issue with vertical scroll

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related