Title: DataTables plug-in

This plug-in uses the DataTables jQuery plug-in to offer a new kind of widget. If you're a developer, this plug-in also offers you a way to include your own DataTable widgets in a TeamPage plug-in.


(Note: starting with version 6.2.30, TeamPage's installers now automatically install this plug-in.)

DataTables Widget

How to insert a widget

You can easily insert a DataTable as a widget into any entry.

Click the Insert Widget icon in the toolbar and select "DataTables" in the widgets list.

Select the widget

After filling in the form, click "OK" to insert the widget.


The widget will appear when you save the entry.

The controls at the top of the table offer easy sorting and filtering.

Filter Example

Widget Option Examples

To filter the entries displayed in the table, you can specify one or more entry type names, and a search expression.

For example, to display just task entries, you could specify "task" for the entry type filter; or x(task) for the search expression.

Show tasks only

To indicate what columns you'd like to display, you can type the names of the "entry fields" that you want to see. In this example, we're displaying the Traction ID, Title, Submission Date/Time, Author Name, Task Priority, and Due Date.


The following options are available:

For Developers: DataTables Library

Usage (1) - An example view

Load the "datatables_example" view by entering /type datatables_example into TeamPage's search box, and pressing enter. Here you can experiment by changing the values of the parameters.

Example View

Usage (2) - with a Section Title

This plug-in supports showing the results of a section in a DataTable, with HTML and styles similar to those of a section table widget.

To display this widget in an IFRAME, you can invoke the parent.sdl's "datatable-section" function like this:

<com.traction.sdl.datatables.parent#datatable-section id="foo" proj="*" ... />

Usage (3) - without a Section Title

To display a similar widget but without a section title, instead use the "datatable-iframe-div" function, like this:

<com.traction.sdl.datatables.parent#datatable-iframe-div id="foo" proj="*" ... />


These functions require the following variables:

The following variables are optional, or may be conditionally required depending upon the value specified by the "entries_type" variable.

Related Articles
Article: Forum6642 (permalink)
Categories: :Doc:plug-in
Date: June 5, 2016; 4:58:35 PM Eastern Daylight Time

Author Name: Takashi Okutsu
Author ID: takashi