CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
d_unknown
d_unknown

Reputation: 875

Duplicate empty header occur in datatable when enabling scrollX or scrollY when using Google Chrome

I have a datatable in my program. And I want it to be scrollable horizontally so what I did was like this:

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
    "scrollX": true,
     "dom": 'frtp'
});

It came out like this(as sample output): enter image description here

It doubled the header. How am I going to fix this?

EDIT: Here's another sample: enter image description here

here's my HTML code:

<table class="table table-striped" id="act_data" width="100%">  <div style="float:left;width:385px" >
    <button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
      <button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
      <!-- <button type="button" id="refresh" class="btn btn-link"  data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
      <a href="<?php echo site_url('admin/homeAdmin/homepage')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
    </div><thead class="header">
      <tr class="well">
        <th style="font-size: 14px;">Employee ID#</th>
        <th style="font-size: 14px;">Username</th>
        <th style="font-size: 14px;">Account Type</th>
        <th style="font-size: 14px;">Status</th>
      </tr>
    </thead>

    <tbody>
      <?php if($result != NULL){?>
        <?php foreach($result as $row){ ?>
            <tr>
               <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->employeeID;?>
                   <input type="hidden" name="userID" id="userID" value="<?php  echo $row->userID;?>" />
                   <input type="hidden" name="pass" id="pass" value="<?php  echo $row->password;?>" />

              </td>

              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->username;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
                   <?php echo $row->usertype;?>
              </td>
              <td style="font-size: 15px;padding-left: 20px;">
               <?php echo $row->status; ?>
               </td>

          </tr>
        <?php }?>
      <?php }?>
    </tbody>
  </table>

Upvotes: 14

Views: 22717

Answers (11)

Prashant Yallatti
Prashant Yallatti

Reputation: 1

In Javascript file Add below the line. serverSide: true, processing: true, scrollX : "100%", Add the Below code to your page. .dataTables_scrollBody thead tr[role="row"]{ visibility: collapse !important; }

Upvotes: 0

Dan Leksell
Dan Leksell

Reputation: 540

This hides the second header and removes the white space between the header and body. 

<style>
     .dataTables_scrollBody thead tr {
         visibility: collapse;
     }

     .dataTables_scrollBody {
         margin-top: -10px;
      }
</style>

Upvotes: 1

Justin Waite
Justin Waite

Reputation: 865

I had the same issue on Google Chrome. This was the fix:

.dataTable(
{
  "processing": false,
  "serverSide": false,
  "autoWidth": true,
  "columnDefs": [
    {"orderable": false, "targets": [5, 6]}
  ],
  "order": [1, 'asc'],
  "dom": 'l<"toolbar">frtip',
  drawCallback: function () { // this gets rid of duplicate headers
      $('.dataTables_scrollBody thead tr').css({ display: 'none' }); 
  },
  scrollY: '65vh',
  scrollCollapse: true,
  paging: false
});

Upvotes: 5

Sairam Krish
Sairam Krish

Reputation: 11701

I had the same issue with firefox & firefox developer edition. The root cause is, when we set scrollX:true, datatable adds an additional div with a table and a header inside, apart from the table & header already constructed. This is to get the scrolling within table effect.

Datatable, tries to set the height to 0px, to hide it. Some browsers don't interpret this properly. 

<tr style="height: 0px;" role="row">

To hide it, changing the style to this row to 'hidden' will break the structure of the table. The working solution would be, to have visibility:'collapse'

Sample datatable configuration:

tableElement.DataTable({
    "scrollX": true,
    "initComplete": function(settings, json) {
        $('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
    }
    //other datatable configurations...  
});

since it's a table, we need to have visibility:'collapse' and not visibility:'hidden' - more info on visibility css property

Upvotes: 27

bany
bany

Reputation: 23

The best way is to use 

dataTable.columns.adjust();

on init/draw callback

Upvotes: 0

&#193;ngelBlanco
&#193;ngelBlanco

Reputation: 458

The solution was simple in my case. Just include this on your css:

/* Override sorting header --> DataTable Bug */
.dataTables_scrollBody > table > thead > tr {
    visibility: collapse;
    height: 0px !important;
}

Upvotes: 4

Urvashi Bhatt
Urvashi Bhatt

Reputation: 529

Solution 1 :

To Resolve This Please Use "scrollXInner": true Avoid to Using "scrollX": true"

var tableI = $('#table_data').DataTable({
    "bLengthChange": false,
    "scrollX": true, //Do Not Use This (Remove This Line)
    "scrollXInner": true //Use This (Add This Line)
     "dom": 'frtp'
});

Solution 2 :

OR You Can Add This CSS

.dataTables_scrollBody thead tr[role="row"]{
    visibility: collapse !important;
}

Upvotes: 10

Anshul Dahiya
Anshul Dahiya

Reputation: 660

Good explanation by Sairam. Better way would be to use just a CSS

div.dataTables_scrollBody thead {           
    display: none;
}

Upvotes: 3

gawkface
gawkface

Reputation: 2312

This worked for me:

$('#DataTables_Table_0').on( 'draw.dt' function() {
    $('.dataTables_scrollBody thead tr').addClass('hidden')
}

Reference: geam's March 2015 answer on datatables.net forum

Upvotes: 0

Swati
Swati

Reputation: 1

You can use Following code in your CSS:

div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }

Upvotes: -1

The Guest
The Guest

Reputation: 708

Try something like this:

"scrollX": '100%',

"scrollXInner": '125%',

Upvotes: 0

Related Questions