Best Data Table

by Behseini

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<script src="//cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://nightly.datatables.net/responsive/css/responsive.dataTables.min.css">
<div class="row">
<div class="panel-group" id="all-data-table" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-all-data-table">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#all-data-table" href="#collapse-all-data-table" aria-expanded="true" aria-controls="collapse-all-data-table">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapse-all-data-table" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-all-data-table">
      <div class="panel-body">
           <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
              ...

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
         responsive: true,
         dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf', 'csv'
    ]
} );
    
    
} );