Sử dụng Simple DataTable để hiển thị danh sách

Nếu các bạn muốn tìm một thư viện để hiển thị danh sách dạng bảng, hỗ trợ tìm kiếm, phân trang, sắp xếp, và không phụ thuộc và jQuery thì đây có lẽ là thư viện phù hợp với bạn.

Repository: https://github.com/fiduswriter/Simple-DataTables

Để sử dụng được thư viện, bạn cần: 

• Thêm thư viện js và css vào dự án
• Khai báo thẻ table kèm theo id 
• Gọi thư viện Simple DataTable
  

Thêm thư viện css và javascript vào file html

<link
      href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css"
      rel="stylesheet"
      type="text/css"
    />
<script
      src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"
      type="text/javascript"
    ></script>

Thêm data vào trang web:

<table id="datatablesSimple">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
   <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>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>63</td>
         <td>2011/07/25</td>
         <td>$170,750</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>
      </tr>
      <tr>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td>Edinburgh</td>
         <td>22</td>
         <td>2012/03/29</td>
         <td>$433,060</td>
      </tr>
      <tr>
         <td>Airi Satou</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>33</td>
         <td>2008/11/28</td>
         <td>$162,700</td>
      </tr>
      <tr>
         <td>Brielle Williamson</td>
         <td>Integration Specialist</td>
         <td>New York</td>
         <td>61</td>
         <td>2012/12/02</td>
         <td>$372,000</td>
      </tr>
      <tr>
         <td>Herrod Chandler</td>
         <td>Sales Assistant</td>
         <td>San Francisco</td>
         <td>59</td>
         <td>2012/08/06</td>
         <td>$137,500</td>
      </tr>
      <tr>
         <td>Rhona Davidson</td>
         <td>Integration Specialist</td>
         <td>Tokyo</td>
         <td>55</td>
         <td>2010/10/14</td>
         <td>$327,900</td>
      </tr>
      <tr>
         <td>Colleen Hurst</td>
         <td>Javascript Developer</td>
         <td>San Francisco</td>
         <td>39</td>
         <td>2009/09/15</td>
         <td>$205,500</td>
      </tr>
   </tbody>
</table>

Gọi thư viện Simple Data Tables:

window.addEventListener('DOMContentLoaded', event => {
    // Simple-DataTables
    // https://github.com/fiduswriter/Simple-DataTables/wiki

    const datatablesSimple = document.getElementById('datatablesSimple');
    if (datatablesSimple) {
        new simpleDatatables.DataTable(datatablesSimple);
    }
});

Xem code đầy đủ ở Plunker: https://plnkr.co/edit/D08N3e5YTW9A784f?open=lib%2Fscript.js

Chúc các bạn thành công!