> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/multi-select-checkbox-table-bootstrap-ok.md).

# Multi select checkbox table bootstrap (ok)

<figure><img src="/files/uk5a2jx3Y8gEHjwn4Frv" 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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/multi-select-checkbox-table-bootstrap-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
