I'm working on a table view that will be populated with five columns and many rows of data. I would like to be able to sort the table by selecting a column and then sorting it alphabetically. Ideally, I should be able to sort the table based on any of the columns. Is this possible with views exposed filters? If so, how would I approach this?
Install and configure DataTable module.
Please follow the steps given below:
Create a new view at admin/build/views/add
Add fields to show in the table.
Select DataTables as the view style.
The DataTables module integrates the jQuery plugin DataTables into Drupal as a views style and a callable theme function.
After the DataTables module (with "s" ...) is installed, enabled and configured as described in the previous answer, make sure to also review the
settings of the DataTables format (in the Views UI).
By using that settings-link, you should at least review these settings specific to sorting of the columns of your view:
- Sortable (check to enable, uncheck to disable).
- Default order (Ascending or Descending).
- Default sort (to select the column to be used for sorting when the Views results are first displayed, select "none" if you don't want any sorting to start with).
Refer to the (short) video about Create Powerful Tables with the DataTables jQuery Plugin and Views for an intro about it, and how to use it as a views style plugin. Using the "settings" link for this views style, you can specify all sorts of dataTables options/features. In the above video starting from around 3:00 you see many of them.
Below is a screenprint of such display using DataTables. It's a display I created using Views (of course) with a table with:
- 8 fields in (defined in my view).
- 5 table columns for the 5 fields I have decided to always show.
- 3 table columns which I defined as "hidden and expandable" (within the DataTables settings after you select DataTables as the Views style).
Here is how the DataTables display looks like:
Hiding selected columns
If you only have 5 columns, they should easily fit within the width of a screen. But if you have many more (eg 10 or even more), you may want to use hide selected columns (which is different from "exclude from display" in standard Views!).
This technique is also used in the example above. For each row there is a link 'Show Details' (in its 1st column). If you click on one (or more) of them, the hidden fields of such row are shown below that row (with grey background here) and the link you clicked changes to 'Hide Details'. Obviously, I've not done any styling for such expanded row (hence the grey background, etc). But you can see the 3 fields that were initially hidden.
Assume none of the rows are shown expanded, and you type "
Basic" in the DataTables search box. It will then dynamically (in the browser, no server calls) reduce the table display to only those rows with
Basic Page as value for "Type". But wait, there is even more: if you'd type a string like part of "
21:15" instead (hidden in some of the rows), it will also dynamically reduce the table display to only those rows, like the expanded row shown in the screenprint. But wait, there is even (quite) a bit more: a search string like "basic 21:15" will filter the rows to a combination of both search strings. For only this one feature I often recommend the amazing DataTables module, one of Drupal's hidden gems I think. And then there are the other features like pager, sortable columns, etc.
Make sure to use the 1.9.x version of the DataTables library (not 1.10.x or above), as mentioned also on the project page, which states:
While there is work in the 7.x-2.x branch to upgrade to the latest DataTables version (1.10.x), the 7.x-1.x branch only works with DataTables <= 1.9.x. Since it's not listed in the projects download page, you will have to download it directly.
When creating a view, disable the pager of your view, since DataTables provides its own paging features (the video talks about that starting from 2:05).