Advanced Table¶

Short Description¶

Generates more advanced tables that support sorting, searching and pagination. Several options are available to customize those features and the appearance.

Example Code¶

<div id="table-ask-query" class="plastic-js" style="height: auto; width: 100%;">

    <script class="plastic-data" data-url="/docs/_static/data/default.json" data-format="default"></script>

    <script class="plastic-options" type="application/json">
        {
            "benchmark": true
        }
    </script>

    <script class="plastic-display" data-module="advanced-table" type="application/json">
        {
            "tableClasses": "table table-condensed smaller-font",
            "paging": true,
            "searching": true,
            "ordering": true,
            "orderMulti": true
        }
    </script>

</div>

Live Example¶

Example Data¶

Link to the JSON file - click here.

Dependencies¶

Note

plastic.js manages the dependencies automatically. There is no need to include them manually, but you can do so if you want.

DataTables¶

Website: http://www.datatables.net/
Version: 1.10.0
JavaScript: http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js
CSS: http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css

Available Options¶

This example snippet contains all available options with their default values:

<script class="plastic-display" data-module="advanced-table" type="application/json>
    {
        "tableClasses": ""
        "paging": false
        "lengthMenu": [[10,25,50,100,-1],[10,25,50,100,"All"]]
        "searching": true
        "ordering": true
        "orderMulti": true
    }
</script>

Properties details:

Table Classes

Description	Table CSS Classes
Keyword	tableClasses
Type	string

"tableClasses": ""

Paging

Description	Enable Pagination of Table Elements
Keyword	paging
Type	boolean

"paging": false

Menu Length

Description	Sets the available number of entries in the dropdown menu. Takes an 2dim array.
Keyword	lengthMenu
Type	array
Default	[[10,25,50,100,-1],[10,25,50,100,"All"]]

"lengthMenu": [[10,25,50,100,-1],[10,25,50,100,"All"]]

Searching

Description	Enable Searching of Table Elements
Keyword	searching
Type	boolean
Default	true

"searching": true

Ordering

Description	Feature control ordering (sorting) abilities in DataTables.
Keyword	ordering
Type	boolean
Default	true

"ordering": true

Multiple Ordering

Description	Multiple column ordering ability control.
Keyword	orderMulti
Type	boolean
Default	true

"orderMulti": true