Question 36501 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to remove double header row in html DataTable – Jquery

I’m trying to build an html DataTable, opened inside a modal, that retrieves the title and the column names from the css file.
To do that, I defined a custom class for each column and I wrote the column name in the css file with a CUSTOM_CLASS::after{content: "";} statement.

For instance, here is the definition of a column of the table:

<th class="MY_TABLE_COL1"></th>

And here is the css:

.MY_TABLE_COL1::after{content: "Column 1";}

However, when I open the modal, the table appears with a double header row. How can I remove the second one?

$('#myModal').on('shown.bs.modal', function() {
  build_table();
});

function build_table() {
  $('#myTable').DataTable({
    scrollY: '400px',
    scrollCollapse: true,
    columns: [{
      data: "Col1"
    }, {
      data: "Col2"
    }, {
      data: "Col3"
    }],
    destroy: true
  });
}
.MY_MODAL_TITLE::after {
  content: "Title";
}

.MY_TABLE_COL1::after {
  content: "Column 1";
}

.MY_TABLE_COL2::after {
  content: "Column 2";
}

.MY_TABLE_COL3::after {
  content: "Column 3";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css">

<button type="button" id="users" class="btn btn-primary btn-lg" data-toggle="modal" href="#myModal">Open modal</button>

<div class="modal" id="myModal" data-backdrop="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title MY_MODAL_TITLE"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <table class="table table-striped table-bordered table-fixed" style="width:100%" id="myTable">
          <thead>
            <tr>
              <th class="MY_TABLE_COL1"></th>
              <th class="MY_TABLE_COL2"></th>
              <th class="MY_TABLE_COL3"></th>
            </tr>
          </thead>
          <tbody id="myTableBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

(JsFiddle)

Tags:

2

Answers


  1. 0

    remove the scroll tag

        scrollY: '400px',
    scrollCollapse: true,

    heres the working jsfiddle

    Login or Signup to reply.
  2. 0

    If you add a <span> for the column headers (with appropriate change to css)

    .MY_TABLE_COL1 >span::after {
  content: "Column 1";
}

    then you don’t get the double headers.

    $('#myModal').on('shown.bs.modal', function() {
  build_table();
});

function build_table() {
  $('#myTable').DataTable({
    scrollY: '400px',
    scrollCollapse: true,
    columns: [{
      data: "Col1"
    }, {
      data: "Col2"
    }, {
      data: "Col3"
    }],
    destroy: true
  });
}
    .MY_MODAL_TITLE::after {
  content: "Title";
}

.MY_TABLE_COL1 >span::after {
  content: "Column 1";
}

.MY_TABLE_COL2 >span::after {
  content: "Column 2";
}

.MY_TABLE_COL3 >span::after {
  content: "Column 3";
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css">

<button type="button" id="users" class="btn btn-primary btn-lg" data-toggle="modal" href="#myModal">Open modal</button>

<div class="modal" id="myModal" data-backdrop="false">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title MY_MODAL_TITLE"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <table class="table table-striped table-bordered table-fixed" style="width:100%" id="myTable">
          <thead>
            <tr>
              <th class="MY_TABLE_COL1"><span></span></th>
              <th class="MY_TABLE_COL2"><span></span></th>
              <th class="MY_TABLE_COL3"><span></span></th>
            </tr>
          </thead>
          <tbody id="myTableBody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search