Create Powerful Tables with the DataTables jQuery Plugin and Views

By: Ivan Zugec
http://webwash.net |   / webwashnet  

Modules:

DataTables(http://drupal.org/project/datatables)
Views(http://drupal.org/project/views)

Transcript:

The DataTables plugin for jQuery offers enhanced interaction for standard HTML tables. Developers are able to create highly interactive tables with dynamic sorting, filtering and pagination without having to write custom server side code.

As always with jQuery plugins, there is a module that integrates the plugin with Drupal. The DataTables Drupal module integrates the plugin with Views. The Views integration allows developers to create a "DataTables" table with just Views and no custom code.

The module also offers a theme function called `theme_datatable($variables)` for rendering tables programmatically. In this video, we'll create an interactive table using the Views and DataTables module.

Before we begin, download and install DataTables and Views.

Then, download the DataTables plugin from datatables.net.

Extract the file directly into the DataTables module folder. The path to the plugin should be `datatables/DataTables`.

Now that we have everything setup, let's go into Views and create a table.

So go to Structure, Views and click on the "Add new view" link. We'll call the table "DataTables" and select "DataTables" from the "Display format" drop-list and click on "Continue & Edit".

Just add a few fields to the table, they can be any fields. For this video, I'll add the Node Id, Title and Type field. Click on the Full link in the Pager section and change the pager to "Display all items". We need to turn off the Views pager because DataTables implements its own.

We'll configure views to display all items. But please use some common sense, if you're dealing with 100,000 items. You may have some performance issues. Now that we have a basic table setup, let's test it out.

Save the view and go to `/datatables`. If everything is working, you should see a table with pagination and a search filter. Now let's return to the edit page for the view, and we'll add dynamic sorting to our columns.

Click on Settings in the Format area. Check the Sortable checkboxes for all the columns so you can sort each column. If you scroll further down, you can configure certain parts of the table, like elements, display and pagination.

It's important to understand that some of the jQuery plugin options for DataTables may not be available through views. If you need to define some custom configuration for DataTables you have two options. You can programmatically render a table using the datatable theme function or implement Datatables using JavaScript.

Once you have finished configuring the table, click on "Apply" and then save the view. Refresh the views page, and now you should be able to sort by each column.