Display both sort icons on sortable table columns

Question

I'm using Drupal's theme table function to build a custom table.

All of the columns on my table are sortable. I would like to visually indicate that they are sortable by putting both an ascending and descending sort icon in the column header.

To indicate which sort is active, I would like to show only one icon, corresponding to the current sort (ascending or descending).

Here's what I have:

Here's what I want:

How can I accomplish this?

So far, the closest I've gotten is overriding theme_tablesort_indicator(), but this will only let me override the icon for the active sort. (Docs here)

Answer 1

I used some jQuery and CSS to accomplish this:

<script> (function($) { Drupal.behaviors.myBehavior = { attach: function (context, settings) { $("table th a").each(function(){ if (!($(this).html().indexOf('<img') > -1)) { var current = $(this).text(); $(this).html(current + '<span class="sortable"><img src="/misc/arrow-asc.png" style="margin-bottom:0" alt=""><img src="/misc/arrow-desc.png" style="margin:0 -13px 11px 5px" alt=""></span>'); } }); } }; })(jQuery); </script>

Answer 2

I figured out a hacky way to do what I want...

function mytheme_preprocess_table(&$variables) {
  foreach ($variables['header'] as $key => $header) {
    if (!isset($header['sort'])) {
      $header['data'] .= theme('image', array('path' => 'misc/arrow-desc.png', 'width' => 13, 'height' => 13, 'alt' => t('sort descending'), 'title' => t('sort descending')));
      $header['data'] .= theme('image', array('path' => 'misc/arrow-asc.png', 'width' => 13, 'height' => 13, 'alt' => t('sort ascending'), 'title' => t('sort ascending')));
    }
    $variables['header'][$key] = $header;
  }
}

The downside to this solution is that it will apply to unsortable columns as well as sortable columns.

Also, this solution affects the link title that is generated for the column header. It will contain the markup for the arrows as well as "sort by $data".

Clearly this isn't a good solution, but it's the best I've got at the moment.