DataTable View

Last Updated: November 11, 2016

class tethys_sdk.gizmos.DataTableView(rows, column_names, footer=False, attributes={}, 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 current version of DataTables in Tethys Platform is 1.10.12.

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]

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

Four elements are required:

1) A controller for the AJAX call with a DataTableView gizmo.

import json

@login_required()
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 render(request, 'app_name/datatable_ajax.html', context)

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

{% load tethys_gizmos %}

{% gizmo datatable_options %}

3) A url map to the controller in app.py

...
    UrlMap(name='datatable_ajax',
           url='dam-break/datatable_ajax',
           controller='dam_break.controllers.datatable_ajax'),
...

4) 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();
         }
    });

});