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
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>