Multi select checkbox table bootstrap (ok)
https://mdbootstrap.com/snippets/standard/softcon/3353769?view=side
Sử dụng html
<html>
<head>
<base target="_parent">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
<link rel="stylesheet" href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.8.1/css/mdb.min.css">
<link rel="stylesheet" href="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.8.1/plugins/css/all.min.css">
<style></style>
<style>INPUT:-webkit-autofill,SELECT:-webkit-autofill,TEXTAREA:-webkit-autofill{animation-name:onautofillstart}INPUT:not(:-webkit-autofill),SELECT:not(:-webkit-autofill),TEXTAREA:not(:-webkit-autofill){animation-name:onautofillcancel}@keyframes onautofillstart{from{}}@keyframes onautofillcancel{from{}}
</style>
</head>
<body>
<div id="datatable" data-mdb-selectable="true" data-mdb-multi="true" class="datatable">
<div class="datatable-inner table-responsive ps" style="overflow: auto; position: relative;">
<table class="table datatable-table">
<thead class="datatable-header">
<tr>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_0" class="datatable-sort-icon fas fa-arrow-up"></i> Name</th>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_1" class="datatable-sort-icon fas fa-arrow-up"></i> Position</th>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_2" class="datatable-sort-icon fas fa-arrow-up"></i> Office</th>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_3" class="datatable-sort-icon fas fa-arrow-up"></i> Age</th>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_4" class="datatable-sort-icon fas fa-arrow-up"></i> Start date</th>
<th style="cursor: pointer;" scope="col"><i data-mdb-sort="field_5" class="datatable-sort-icon fas fa-arrow-up"></i> Salary</th>
</tr>
</thead>
<tbody class="datatable-body">
<tr scope="row" data-mdb-index="0" class="">
<td data-mdb-field="field_0" false="">Tiger Nixon</td>
<td data-mdb-field="field_1" false="">System Architect</td>
<td data-mdb-field="field_2" false="">Edinburgh</td>
<td data-mdb-field="field_3" false="">61</td>
<td data-mdb-field="field_4" false="">2011/04/25</td>
<td data-mdb-field="field_5" false="">$320,800</td>
</tr>
<tr scope="row" data-mdb-index="1" class="">
<td data-mdb-field="field_0" false="">Garrett Winters</td>
<td data-mdb-field="field_1" false="">Accountant</td>
<td data-mdb-field="field_2" false="">Tokyo</td>
<td data-mdb-field="field_3" false="">63</td>
<td data-mdb-field="field_4" false="">2011/07/25</td>
<td data-mdb-field="field_5" false="">$170,750</td>
</tr>
<tr scope="row" data-mdb-index="2" class="">
<td data-mdb-field="field_0" false="">Ashton Cox</td>
<td data-mdb-field="field_1" false="">Junior Technical Author</td>
<td data-mdb-field="field_2" false="">San Francisco</td>
<td data-mdb-field="field_3" false="">66</td>
<td data-mdb-field="field_4" false="">2009/01/12</td>
<td data-mdb-field="field_5" false="">$86,000</td>
</tr>
<tr scope="row" data-mdb-index="3" class="">
<td data-mdb-field="field_0" false="">Cedric Kelly</td>
<td data-mdb-field="field_1" false="">Senior Javascript Developer</td>
<td data-mdb-field="field_2" false="">Edinburgh</td>
<td data-mdb-field="field_3" false="">22</td>
<td data-mdb-field="field_4" false="">2012/03/29</td>
<td data-mdb-field="field_5" false="">$433,060</td>
</tr>
<tr scope="row" data-mdb-index="4" class="">
<td data-mdb-field="field_0" false="">Airi Satou</td>
<td data-mdb-field="field_1" false="">Accountant</td>
<td data-mdb-field="field_2" false="">Tokyo</td>
<td data-mdb-field="field_3" false="">33</td>
<td data-mdb-field="field_4" false="">2008/11/28</td>
<td data-mdb-field="field_5" false="">$162,700</td>
</tr>
<tr scope="row" data-mdb-index="5" class="">
<td data-mdb-field="field_0" false="">Brielle Williamson</td>
<td data-mdb-field="field_1" false="">Integration Specialist</td>
<td data-mdb-field="field_2" false="">New York</td>
<td data-mdb-field="field_3" false="">61</td>
<td data-mdb-field="field_4" false="">2012/12/02</td>
<td data-mdb-field="field_5" false="">$372,000</td>
</tr>
<tr scope="row" data-mdb-index="6" class="">
<td data-mdb-field="field_0" false="">Herrod Chandler</td>
<td data-mdb-field="field_1" false="">Sales Assistant</td>
<td data-mdb-field="field_2" false="">San Francisco</td>
<td data-mdb-field="field_3" false="">59</td>
<td data-mdb-field="field_4" false="">2012/08/06</td>
<td data-mdb-field="field_5" false="">$137,500</td>
</tr>
<tr scope="row" data-mdb-index="7" class="">
<td data-mdb-field="field_0" false="">Rhona Davidson</td>
<td data-mdb-field="field_1" false="">Integration Specialist</td>
<td data-mdb-field="field_2" false="">Tokyo</td>
<td data-mdb-field="field_3" false="">55</td>
<td data-mdb-field="field_4" false="">2010/10/14</td>
<td data-mdb-field="field_5" false="">$327,900</td>
</tr>
<tr scope="row" data-mdb-index="8" class="">
<td data-mdb-field="field_0" false="">Colleen Hurst</td>
<td data-mdb-field="field_1" false="">Javascript Developer</td>
<td data-mdb-field="field_2" false="">San Francisco</td>
<td data-mdb-field="field_3" false="">39</td>
<td data-mdb-field="field_4" false="">2009/09/15</td>
<td data-mdb-field="field_5" false="">$205,500</td>
</tr>
<tr scope="row" data-mdb-index="9" class="">
<td data-mdb-field="field_0" false="">Sonya Frost</td>
<td data-mdb-field="field_1" false="">Software Engineer</td>
<td data-mdb-field="field_2" false="">Edinburgh</td>
<td data-mdb-field="field_3" false="">23</td>
<td data-mdb-field="field_4" false="">2008/12/13</td>
<td data-mdb-field="field_5" false="">$103,600</td>
</tr>
</tbody>
</table>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>
<div class="datatable-pagination">
<div class="datatable-select-wrapper">
<p class="datatable-select-text">Rows per page:</p>
<div id="select-wrapper-441224" class="select-wrapper">
<div class="form-outline"><input class="form-control select-input placeholder-active active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly=""><span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 0px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div><select name="entries" class="datatable-select select select-initialized">
<option value="10" selected="">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="200">200</option>
</select>
</div>
</div>
<div class="datatable-pagination-nav"> 1 - 10 of 14 </div>
<div class="datatable-pagination-buttons">
<button data-mdb-ripple-color="dark" class="btn btn-link datatable-pagination-button datatable-pagination-left" disabled="true"><i class="fa fa-chevron-left"></i></button>
<button data-mdb-ripple-color="dark" class="btn btn-link datatable-pagination-button datatable-pagination-right"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.8.1/js/mdb.min.js"></script>
<script type="text/javascript" src="https://mdbootstrap.com/api/snippets/static/download/MDB5-Pro-Advanced_3.8.1/plugins/js/all.min.js"></script>
</body>
</html>Sử dụng json
Last updated
Was this helpful?