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
<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"></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>
<script type="text/javascript">
const basicData = {
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
rows: [
["Tiger Nixon", "System Architect", "Edinburgh", "61", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "63", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "66", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "22", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "61", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "59", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "55", "2010/10/14", "$327,900"],
["Colleen Hurst", "Javascript Developer", "San Francisco", "39", "2009/09/15", "$205,500"],
["Sonya Frost", "Software Engineer", "Edinburgh", "23", "2008/12/13", "$103,600"],
["Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560"],
["Quinn Flynn", "Support Lead", "Edinburgh", "22", "2013/03/03", "$342,000"],
["Charde Marshall", "Regional Director", "San Francisco", "36", "2008/10/16", "$470,600"],
["Haley Kennedy", "Senior Marketing Designer", "London", "43", "2012/12/18", "$313,500"]
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(datatable, basicData);
datatable.addEventListener('selectRows.mdb.datatable', e => {
console.log(e.selectedRows, e.selectedIndexes, e.allSelected);
})
</script>
</body>
</html>Last updated
