Dynamic Table

Dynamic table permit to sort, filter, edit, remove element...

Dynamic table is powered by DataTables Plugin which have a lot of functionnalities. For more details, please visit plugin website:

DataTables Documentation.

How to transform my simple table into a dynamic table?

1. Add specific css and javascript

Add inside head this css file:

<link href="assets/plugins/datatables/dataTables.min.css" rel="stylesheet">

Add inside body at the end of your page, before main template scripts:

<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>

2. Create your table markup

To give your table dynamic options, just add table-dynamic class to your table. Here is a basic example:

<table class="table table-dynamic">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Mozilla 1.7</td>
            <td>Win 98+ / OSX.1+</td>
            <td>1.7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Misc</td>
            <td>PSP browser</td>
            <td>PSP</td>
            <td>-</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Other browsers</td>
            <td>All others</td>
            <td>-</td>
            <td>-</td>
            <td>U</td>
        </tr>
    </tbody>
</table>

Your table will automatically have pagination and sorting option.

Export Tools

If you need to export your table data with Excel, PDF or print it, you can add export tools by adding table-tools class to your table:

<div class="filter-left">
    <table class="table table-dynamic table-tools">
        <!-- YOUR TABLE CONTENT -->
    </table>
</div>

Here we add filter-left class too to indicate that we want search input at the left side of the table (export tools are at the right).

Filtering Data

The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is global, and you may wish to present controls to search on specific columns only.

You can add input filter in head with filter-head class, in footer with filter-footer class and select input with filter-select:

// Table with text input filter in head
<table class="table table-dynamic filter-head">
    <!-- YOUR TABLE CONTENT -->
</table>

// Table with text input filter in footer
<table class="table table-dynamic filter-head">
    <!-- YOUR TABLE CONTENT -->
</table>

// Table with select input filter in footer
<table class="table table-dynamic filter-head">
    <!-- YOUR TABLE CONTENT -->
</table>

You can see an example in template here: http://themes-lab.com/paymee/tables-filter.php.

You can find more comprehensive examples directly on plugin site. It includes a lot of examples with html / js / css details

See DataTables Examples