DataTable View

Last Updated: November 11, 2016

class tethys_sdk.gizmos.DataTableView(rows, column_names, footer=False, hover=False, striped=False, bordered=False, condensed=False, dark=False, attributes=None, classes='', **kwargs)

Table views can be used to display tabular data. The table view gizmo can be configured to have columns that are editable. When used in this capacity, embed the table view in a form with a submit button.

Note

The default version of DataTables in Tethys Platform is 1.11.3.

rows

A list/tuple of lists/tuples representing each row in the table.

Type:: tuple or list, required

column_names

A tuple or list of strings that represent the table columns names.

Type:: tuple or list

footer

If True, it will add the column names to the bottom of the table.

Type:: Optional[bool]

hover

Illuminate rows on hover (does not work on striped tables)

Type:: bool

striped

Stripe rows

Type:: bool

bordered

Add borders and rounded corners

Type:: bool

condensed

A more tightly packed table

Type:: bool

dark

Style table with dark variant

Type:: bool

attributes

A dictionary representing additional HTML attributes to add to the primary element (e.g. {"onclick": "run_me();"}).

Type:: Optional[dict]

classes

Additional classes to add to the primary HTML element (e.g. "example-class another-class").

Type:: Optional[str]

\*\*kwargs

See https://datatables.net/reference/option.

Type:: DataTable Options

Regular Controller Example

from tethys_sdk.gizmos import DataTableView

datatable_default = DataTableView(
    column_names=('Name', 'Age', 'Job'),
    rows=[('Bill', 30, 'contractor'),
        ('Fred', 18, 'programmer'),
        ('Bob', 26, 'boss')],
    searching=False,
    orderClasses=False,
    lengthMenu=[ [10, 25, 50, -1], [10, 25, 50, "All"] ],
)

context = {
    'datatable_view': datatable_default
}

Regular Template Example

{% load tethys_gizmos %}

{% gizmo datatable_view %}

Note

You can also add extensions to the data table view as shown in the next example. To learn more about DataTable extensions, go to https://datatables.net/extensions/index.

ColReorder Controller Example

from tethys_sdk.gizmos import DataTableView

datatable_with_extension = DataTableView(
    column_names=('Name', 'Age', 'Job'),
    rows=[('Bill', 30, 'contractor'),
        ('Fred', 18, 'programmer'),
        ('Bob', 26, 'boss')],
    colReorder=True,
)

context = {
    'datatable_with_extension': datatable_with_extension
}

ColReorder Template Example

{% load tethys_gizmos %}

#LOAD IN EXTENSION JAVASCRIPT/CSS
{% block global_scripts %}
  {{ block.super }}
   <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
{% endblock %}

{% block styles %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">
{% endblock %}
#END LOAD IN EXTENSION JAVASCRIPT/CSS

{% gizmo datatable_with_extension %}

AJAX

Often dynamically loading in the DataTable can be useful. Here is a description of how to do so with the DataTableView gizmo.

Note

In order to use this, you will either need to use a DataTableView gizmo on the main page or register the dependencies in the main html template page using the import_gizmo_dependency tag with the datatable_view name in the import_gizmos block.

For example:

{% block import_gizmos %}
    {% import_gizmo_dependency datatable_view %}
{% endblock %}

Three elements are required:

A controller for the AJAX call with a DataTableView gizmo.

import json
from .app import App

@controller
def datatable_ajax(request):
    """
    Controller for the datatable ajax request.
    """

    searching = False
    if request.GET.get("searching") is not None:
        searching = json.loads(request.GET.get("searching"))
        if searching != True and searching != False:
            searching = False

    datatable_default = DataTableView(column_names=("Name", "Age", "Job"),
                                      rows=[("Bill", 30, "contractor"),
                                            ("Fred", 18, "programmer"),
                                            ("Bob", 26, "boss")],
                                      searching=searching,
                                      orderClasses=False,
                                      lengthMenu=[ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                                      )

    context = {"datatable_options": datatable_default}

    return App.render(request, "datatable_ajax.html", context)

A template for with the tethys gizmo (e.g. datatable_ajax.html)

{% load tethys %}

{% gizmo datatable_options %}

The AJAX call in the javascript

$(function() { //wait for page to load

    $.ajax({
        url: 'datatable_ajax',
        method: 'GET',
        data: {
            'searching': false, //example data to pass to the controller
        },
        success: function(data) {
            //add DataTable  to page
           $("#datatable_div").html(data);

            //Initialize DataTable
            $("#datatable_div").find('.data_table_gizmo_view').DataTable();
         }
    });

});

Table View

Plot View