Bootstrap Radio Buttons as DataTable Filters

Bootstrap Radio Buttons as DataTable Filters

This is the first of a series of tutorials on using Bootstrap radio buttons in the wild to filter real datasets in concert with other commonly-used UI components like DataTables and jQuery UI.

Part 1: Converting a classic input radio to the Bootstrap label

radio buttonsFiltering tables of data is the central task of many a business web-app. DataTables are searchable by default, but records often beg to be batch-filtered into several status modes like: current | archived | all.

Bootstrap Radio Buttons provide a nice, clean look, but many developers shy away from them due to unfamiliarity with their CSS label-based class manipulation and/or compatibility issues with other component libraries like jQuery UI.

Bootstrap checkbox and radio btn-groups work ‘out of the box’, but the simple activation of a default button decouples active button highlighting from the input tag checked state. In this case, the active label class must be handled manually, but the docs don’t explain how, so a stack-overflow of posts for dev-help ensues.

How To: Bootstrap-style radio btn-group-ies

  • a label tag must enclose each input tag
  • only the label is visible: text & style are defined by Bootstrap CSS – classic radio/checkbox control is not displayed
  • a div tag should enclose all markup (this is especially important when iterating loops)

In this JSFiddle Example, you can view the de-coupled (broken) Bootstrap state by uncommenting the first line of the toggleActive method.

var toggleActive = function(activate)
{
   //return; // uncomment this line to see the de-coupled (broken) Bootstrap state

   // de-activate any existing selection
   $('#record-filters').find('.btn-primary').each(function(index, element) {
      $(element).removeClass('active');
   });
   activate.addClass('active');
}

 

Avoid jQuery UI conflicts:

Anyone who has delved into the wealth of threads asking whether Bootstrap and jQuery UI can be used together will quickly find that there are a range of answers from ‘yes, absolutely’ to ‘no, absolutely not’. As usual, truth lies between the extremes.

Here are a few simple rules-of-thumb to avoid conflicts between Bootstrap and jQuery UI:

  • include jQuery UI before Bootstrap
  • update to recent version of Bootstrap > 3.0.x
  • download a custom build of each library excluding widgets/modules, e.g.:
    • update standard Bootstrap to v3.3.6
    • update jQuery UI v1.11.4 with custom build excluding:
      • Effects (all components)
      • Widgets: Button, Dialog, and Spinner
  • if all else fails, consider using a pre-combined library like jquery-ui-bootstrap or ‘.widget.bridge’ plug-in

Parts 2 and 3 of this tutorial series will describe how to handle disabled radio-button state and how to co-ordinate dynamic sets of radio buttons on a single form.

Kevin Belanger

Kevin Belanger

A graduate of the University of Toronto (1996, BSc Physics) and the University of Victoria (2013 MSc, Earth and Ocean Sciences), Kevin enjoys aikido, canoeing, travelling, writing poetry and spending time with his family.

Tags:

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.