**************
DataTable View
**************

**Last Updated:** November 11, 2016

.. autoclass:: tethys_sdk.gizmos.DataTableView

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

    });