DataTables + Bootstrap + FixedHeader

by dipti104

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<button class="btn btn-sm btn-warning">
<i class="fa fa-plus"></i>
New BM App
</button>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Action</th>
      <th>App ID</th>
      <th>Channel ID</th>
      <th>Needs OTP</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><a class="linkTag"><i class="fa fa-eye openShowModal" aria-hidden="true" title="Show"></i></a>
        <a class="linkTag"><i class="fa fa-pencil-square-o" aria-hidden="true" title="Edit"></i></a></td>
      <td>YRB999</td>
      <td>YRB</td>
      <td>N</td>
    </tr>
    <tr>
      <td><a class="linkTag"><i class="fa fa-eye openShowModal" aria-hidden="true" title="Show"></i></a><a class="linkTag"><i class="fa fa-pencil-square-o" aria-hidden="true" title="Edit"></i></a></td>
      <td>SSPAPP</td>
      <td>YRB</td>
      <td>Y</td>
    </tr>
    <tr>
      <td><a class="linkTag"><i class="fa fa-eye openShowModal" aria-hidden="true" title="Show"></i></a><a class="linkTag"><i class="fa fa-pencil-square-o" aria-hidden="true" title="Edit"></i></a></td>
     ...

CSS

body {
  font-family: Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #222222;
  padding: 1em;
}

div.FixedHeader_Cloned table {
  margin: 0 !important
}

div.dataTables_info {
  display: inline-block;
}

.linkTag {
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
}
td.labelText, td.valueText, td.msg-error{
  border-top: 0px !important;
}
td.labelText{
  width: 30%;
}
td.valueText{
  width: 50%;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    "bSort": false,
    "dom": '<"top"f>rt<"bottom"ip><"clear">',
    "language": {
      "search": '<label style="float: left; margin-right: 10px"><b>Search App ID or Channel ID here:</b></label>',
      "searchPlaceholder": ''
    }
  });
  new $.fn.dataTable.FixedHeader(table, {
    alwaysCloneTop: true
  });
  
  $('.openShowModal').on('click', function(){
  	console.log('Test');
    $("#showModal").modal({
    	'backdrop': false
    });
  });
});