---
description: https://mdbootstrap.com/snippets/standard/softcon/3353769?view=side
---

# Multi select checkbox table bootstrap (ok)

<figure><img src="https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FwjlPzxcVn1774XJpmHMg%2FScreenshot_1.png?alt=media&#x26;token=69b0b3ea-768a-41c7-b774-1d12f55ba00b" alt=""><figcaption></figcaption></figure>

## **Sử dụng html**

```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&amp;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
<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&amp;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>
```
