Monday, 4 February 2013

Drupal 7 - Data Tables (Interactive flow of dynamic sorting, filtering and pagination)

Data Tables are 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 "DataTables" tables with just Views and no custom code. The module also offers a theme function called theme_datatable($variables) for rendering tables programmatically.
  1. Download and install DataTables and Views module.
  2. Download the DataTables plugin from their download page (1.9+). 
  3. Extract the file directly into the DataTables module. The path to the plugin should be sites/all/modules/datatables/DataTables.

Views Integration

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


1. Go to Structure -> Views (admin/structure/views) and click on the "Add new view" link.
2. Fill in the "Add new view" form with the values and click on "Continue & Edit" button.

  1. Add a few fields to the table. For this tutorial, I'll add the Node Id, Title and Type field.

  1. Click on the Full link in the Pager section and change the paper to "Display all items". 
  2. We need to turn off the Views pager because DataTables implements its own pager.
  3. Save the view by clicking the Save button in the top right corner.
  4. Go to /datatable to test out the view. If everything is working, you should see a table with pagination and a search filter.

5. Return back to the edit page for the view and click on the Settings link next to DataTables in the Format area.

6. Check the Sortable checkboxes for all the columns so you can sort each column.

7. Once you have finished configuring the table, scroll to the bottom and click on the "Apply (all displays)" button, and then save the view.
8. Refresh the views page, and now you should be able to sort by each column.

This is a simple use case if you want to learn more, go to the settings section and play around with some of the other options.

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.