DataTables

Canvas bundles DataTables to add instant sorting, searching, and pagination to any standard HTML <table>. It layers on top of Bootstrap table styling, so a plain .table becomes an interactive grid with a single init call.

Setup

Include the bundled DataTables stylesheet in the <head>, then initialize your table by its id after the scripts load.

<!-- In <head> -->
<link rel="stylesheet" href="css/components/bs-datatable.css">

jQuery('#datatable1').dataTable();

Structure

Build a normal Bootstrap table with a <thead> and <tbody>. Give it a unique id, and wrap it in .table-responsive so it scrolls cleanly on small screens. A matching <tfoot> is optional and mirrors the header. Use .table-striped and .table-bordered for the default Canvas look.

<div class="table-responsive">
  <table id="datatable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <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>
    </tbody>
  </table>
</div>

jQuery('#datatable1').dataTable();

Options

Pass DataTables options as an object to .dataTable({ ... }) or .DataTable({ ... }). Common ones:

paging: enable or disable pagination (default true).
searching: enable or disable the search box (default true).
ordering: enable or disable column sorting (default true).
pageLength: rows shown per page (default 10).
order: initial sort, for example [[ 0, 'asc' ]].
info: show or hide the "Showing X of Y" summary.

jQuery('#datatable1').dataTable({
  pageLength: 25,
  order: [[ 4, 'desc' ]]
});

Tips

Every column in <thead> must have a matching cell in each <tbody> row, or sorting misaligns.
Keep the table inside .table-responsive so wide grids scroll horizontally on mobile instead of overflowing.

Was this page helpful?