3

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?

3

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.

  • Hey Nikhil, not to hijack your answer for posting new questions, but ... After the DataTables (with "s") module is installed, HOW should it be configured to answer this question here? And how should the view (as in the question) be configured? I suggest you expand your answer to avoid it is perceived as a link-only answer (at risk to be deleted via moderation). – Pierre.Vriens Dec 15 '16 at 10:34
  • @Pierre.Vriens Thanks for suggestion. Modified the answer. – Nikhil Banait Dec 15 '16 at 10:41
  • Merci for considering my prior comment. A bit better already, but (1) the module name is with "s" (2) if you only complete the steps you mentioned, I doubt a user will be able to "to sort the table by selecting a column" (as in the question), since for that you need to perform additional configuration. You know how to complete that part of it, or should I rather post an extra answer to complete yours? PS: I'm a fan of DataTables (with "s"), can you tell? – Pierre.Vriens Dec 15 '16 at 10:51
  • You please go ahead to complete my answer :) – Nikhil Banait Dec 15 '16 at 10:55
1

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.

Example

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:

enter image description here

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.

Bonus

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.

Remarks

  • 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.