Datatables

Datatables are used extensively throughout the Atomia applications to list things such as invoices, domain names, subcriptions, etc.

The datatables are generated with the help of the DataTables jQuery plugin.

Some of the elements of a datatable are automatically generated by the plugin. To distinguish the classes on these elements from manually added classes they do not follow our standard naming convention, but are instead prefixed with dt-.

The datatables are also responsive, thanks to the Responsive extension.

Example

Invoice No. Date Type Amount purchased Amount spent Actions
1000579 11/9/2015 Credit purchased 50.00USD 50.00USD View
Show records
Showing 1 to 3 (of 3 total)

Markup

<div class="dt-Wrapper">

    <div class="dt-Actions dt-Actions--filter">
        <a class="Btn u-right u-is-disabled" href="javascript:void(0);">Tags</a>
        <input type="search" class="dt-Search" placeholder="Search records">
    </div>

    <div class="dt-Processing" style="display: none;">Processing...</div>
    <table class="Table Table--datatable">
        <thead>
            <tr role="row">
                <th>
                    <label class="Tick Tick--dark">
                        <input type="checkbox" class="Tick-input">
                        <span class="Tick-checkbox"></span>
                    </label>
                </th>
                <th>Invoice No.</th>
                <th>Date</th>
                <th>Type</th>
                <th>Amount purchased</th>
                <th>Amount spent</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <label class="Tick">
                        <input type="checkbox" class="Tick-input">
                        <span class="Tick-checkbox"></span>
                    </label>
                </td>
                <td>1000579</td>
                <td>11/9/2015</td>
                <td>
                    <span class="Icon Icon--ok Icon--green" title="Credit purchased"></span> Credit purchased
                </td>
                <td class="u-right-text">
                    <span>50.00</span><span class="currency">USD</span>
                </td>
                <td class="u-right-text">
                    <span>50.00</span><span class="currency">USD</span>
                </td>
                <td>
                    <a class="Btn Btn--small Btn--primary" href="javascript:void(0);">View</a>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="Grid Grid--no-gutter">
      <div class="dt-Length Grid-column-1">
          Show
          <label class="Select Select--autowidth">
              <select>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
              </select>
          </label>
          records
      </div>
      <div class="Paginate Grid-column-4">
          <a class="Paginate-button Icon--first is-disabled">First</a>
          <a class="Paginate-button Icon--previous is-disabled">Previous</a>
          <a class="Paginate-button Paginate-button--page">-1</a>
          <a class="Paginate-button Paginate-button--page">...</a>
          <a class="Paginate-button Paginate-button--page">1</a>
          <a class="Paginate-button Paginate-button--page is-active">2</a>
          <a class="Paginate-button Paginate-button--page">3</a>
          <a class="Paginate-button Paginate-button--page">...</a>
          <a class="Paginate-button Paginate-button--page">323</a>
          <a class="Paginate-button Icon--next">Next</a>
          <a class="Paginate-button Icon--last">Last</a>
      </div>
      <div class="dt-Info Grid-column-1">Showing 1 to 3 (of 3 total)</div>
    </div>
</div>