Good morning I would like to know that datatble or functionality I must download / use / implement to have the effect of the image I mean that when you click on the green button you display the information below (salary in this case) thanks
The functionality is called link
You must include these scripts in the header of the document between and
this is responsible for the visual part
<script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>
this is responsible for the functionalities
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
this is responsible for creating it
<script type="text/javascript">
$(document).ready( function () {
//pilas con el id, en este caso es 'myTable' depende del tuyo
$('#myTable').DataTable();
} );
</script>
I hope it serves you
Here is an example. CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11,r-2.0.2/datatables.min.css" />
JS:
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="application/javascript" language="JavaScript"></script>
<script src="https://cdn.datatables.net/t/bs-3.3.6/dt-1.10.11,r-2.0.2/datatables.min.js" type="application/javascript" language="JavaScript"></script>
Datatables:
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#example2-tab1" aria-controls="example2-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li role="presentation"><a href="#example2-tab2" aria-controls="example2-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="example2-tab1">
<table id="example2-tab1-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Phone</th>
<th>Extension</th>
<th>Department</th>
<th>Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>123-456-7890</td>
<td>1230</td>
<td>IT</td>
<td>Dai Rios</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>123-456-7890</td>
<td>1231</td>
<td>Accounting</td>
<td>Angelica Ramos</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>123-456-7890</td>
<td>1232</td>
<td>Marketing</td>
<td>Angelica Ramos</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="example2-tab2">
<table id="example2-tab2-dt" class="table table-striped table-bordered table-condensed" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Phone</th>
<th>Extension</th>
<th>Department</th>
<th>Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>123-456-7890</td>
<td>1230</td>
<td>IT</td>
<td>Dai Rios</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>123-456-7890</td>
<td>1231</td>
<td>Accounting</td>
<td>Angelica Ramos</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>123-456-7890</td>
<td>1232</td>
<td>Marketing</td>
<td>Angelica Ramos</td>
</tr>
</tbody>
</table>
</div>
</div>
javascript:
$ (document) .ready (function () { $ ('# example2-tab1-dt'). DataTable ({ responsive: true });
$ ('# example2-tab2-dt'). DataTable ({ responsive: true });
$ ('a [data-toggle="tab"]'). on ('shown.bs.tab', function (e) { $ ($. fn.dataTable.tables (true)). DataTable () .columns.adjust () .responsive.recalc (); });
}); '
I hope you understand.
Luck.