Make Admin Template Documentation

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