Datatable Page Setup

Components of a Datatable page

In example code, replace foo with the appropriate variable for the datatable.

Set up a route in /fec/data/urls.py

url(r'^data/foo/$', views_datatables.foo),

Set up a view in /fec/data/views_datatables.py

def foo(request):
    return render(request, 'datatable.jinja', {
        'parent': 'data',
        'result_type': 'foo',
        'slug': 'foo',
        'title': 'foo',
        'columns': constants.table_columns['foo']
    })

Set up columns for Datatable in /fec/data/constants.py

Find the OrderedDict called table_columns, and add the appropriate column names:

    ('foo', ['Column One', 'Column Two', 'Column Three', 'Column Four']),

Set up filters template

Create a page in /fec/data/templates/partials/ called foo-filter.jinja. This template specifies the filters for the datatable. Other filter templates that end with -filter.html can be looked at for examples of how to use certain filters.

Create a details panel template

Create a new Handlebars template in /static/js/templates/[name of table].hbs. These templates use a custom Handlebars helper to cut down on extra markup that goes like:

{{#panelRow "Label"}}
  {{some_data_key}}
{{/panelRow}}

For schedules, the details template should include all the data from the schedule as well as information about the filing committee.

Initialize Datatable JavaScript

Create foo.js in /static/js/pages/.

'use strict';

var $ = require('jquery');

var tables = require('../modules/tables');
var columns = require('../modules/columns');
var someDetailsTemplate = require('../templates/example-template.hbs');

$(document).ready(function() {
  var $table = $('#results');
  new tables.DataTable($table, {
    autoWidth: false,
    title: 'Foo',
    path: ['foo', 'bar'],
    columns: columns.foo,
    order: [[4, 'desc']],
    useFilters: true,
    useExport: true,
    rowCallback: tables.modalRenderRow,
    callbacks: {
      afterRender: tables.modalRenderFactory(someDetailsTemplate)
    }
  });
});

The path property is the path to the API (https://api.open.fec.gov/developers/). For example to connect to /candidates/totals, the path would be ['candidates', 'totals']. The order property refers to the column that the Datatable will be sorted by default. In the above sample code, it would be the fourth column in descending order.

Set up Datatable column data

In /static/js/modules/columns.js, add a new variable:

var foo = [
  {
    data: 'committee',
    orderable: false,
    className: 'all column--large',
    render: function (data, type, row) {
      return row.committee.name;
    }
  },
  {
    data: 'description',
    orderable: false,
    className: 'all column--large',
  },
  dateColumn({data: 'end_date', orderable: true, className: 'min-tablet hide-panel column--med'}),
  currencyColumn({data: 'contributions', className: 'min-desktop hide-panel column--number'}),
  modalTriggerColumn
];

Each object represents a column, in order. Data is the column parameter. If data is an object, we can drill down to the specific property with passing a function to render. In the function, row would be object property. The size of columns are handled by class names, and dateColumn and currencyColumn are available to show column data in date or currency formats.

At the end of the file, don't forget to add the variable to module.exports with foo: foo.

Make sure changes to javascript and scss are compiled: Run npm run watch once, to watch for changes to .js and .scss. -Or- Run npm run build after saving to compile the .js and .scss manually.