Skip to content
This repository

Generalise the jQuery UI method of sorting icons #153

DataTables opened this Issue February 17, 2013 · 5 comments

2 participants

Allan Jardine TobiasBg
Allan Jardine

When bjQueryUI is enabled in DataTables, DT will put the sorting icons into a span tag. This is actually quite useful as it forces the icon to take up width in the header cell, unlike the default where the text can overlap the sorting icon.

The trick is that the sorting icon can actually float around and end up in the wrong place, so need to be careful with this - the approach used for my jQuery UI sorting icons should work, but want to test it further.

However, this bug is to require that there be an option added which will put the sorting icons into this layout style, even without jQuery UI mode being enabled.

This is also required to make jQuery UI an optional module which it will be in 1.11.

Worth noting that this also has impact on FixedColumns: and likely scrolling in general in DataTables.


Another idea might be to use a CSS :after rule for the table head cell content wrapped in a <div> container and then use an icon font as a replacement for the sorting arrow images. I've done this in TablePress recently, see (for sorting and pagination arrows), the CSS is at
To make sure that the text does not overlap the arrows, some extra right padding to the cell, and absolute positioning of the arrows works.
Advantages of the icon font are that they will be HiDPI/Retina out of the box, their color is easily changeable via CSS, and they make the three HTTP requests for the arrow images unnecessary.
The only disadvantage that I've seen so far is that IE 7 does not support this method (as it doesn't support :after). But given the small remaining market share of IE 7, this shouldn't be that big of a problem. IE 7 users will just not see the arrows, but can still sort the table of course.

Allan Jardine

Using an icon font is definitely an interesting option. I hadn't actually considered that before - thinking the graphics in DataTables were too simple to benefit from it, but actually there are 11 images used by DataTables, so an icon font sounds like a good approach.

The only problem with it is that it requires additional markup. Specifically there must be an inner element in the thead cells so :after can be used (it can be put onto the cell as that would make the markup invalid), and :content would override the content of the cell. DataTables doesn't currently require additional markup in the header cells and it would be a shame to force this.

The other thing is, I'm not sure how jQuery UI theme roller would cope with using :after since it currently uses called for the sorting icons etc.

I can see this issue growing arms and legs before it is resolved....!

Currently thinking that I'll need to forms - the plain markup like is currently used, and an option to use the jQuery UI style markup that is already in DataTables, which in turn would use an icon font in a span or i tag for the sorting icon state.


Yes, the icon font method would require extra markup, like a wrapping <div> container. This could be added via JS though, so that no markup changes in the HTML are necessary.

But you are right, this might be getting out of scope of this ticket.

Allan Jardine

I've spun the web font usage into issue #165. While typing that bug up I convinced myself that it should wait until 1.11 before being fully integrated into the core, but I think the Bootstrap integration that is provided should do it for 1.10 with the header rendering that will be provided by this bug.

Allan Jardine DataTables referenced this issue from a commit June 22, 2013
Allan Jardine New: Header renderers
- Rendering functions can now be provided for the header cells in the
  table, which will format HTML in the cells (note only the cells that
  are identified as the 'control' cell for the column have the renderer
  applied) and apply any classes needed (thus the renderers should
  listen for the 'sort' event).

- This is done to provide integration options for other frameworks and
  advanced styling controls. For example, FontAwesome could now easily
  be used to style a header with sorting icons sourced from the font.

- jQuery UI header rendering has been seperated out into its own
  renderer which is activated by the bJQueryUI initialisation option.
  This, along with the whole of DataTables' jQuery UI ThemeRoller
  support will be moved into a plug-in in 1.11 (it is very tempting make
  that change now, but one major version for the decprecated option is
  correct I think). This is the last part of the jQuery UI integration
  that needed to be decoupled from the DataTables core - it can now all
  be provided by plug-ins.

- This fixed issue #153

- Renderers still be to documented.
Allan Jardine

This is fixed by commit 01444af.

Allan Jardine DataTables closed this June 22, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.