Skip to content
Jquery + bootstrap filters rending out of the box for backoffice use
CSS JavaScript
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
css small change Dec 9, 2015
demo adding demo Oct 30, 2015
images adding image Jul 7, 2015
.DS_Store adding saving input text and date range to data model to fix clear bug Oct 27, 2015
.gitignore adding package Nov 13, 2015 change in email and demo url May 6, 2019
jquery.filters.js fix Feb 19, 2017
package.json 0.3.1 Oct 10, 2016


No Download Needed. jQuery filters rending out of the box for backoffice use.



Quick Start

<!DOCTYPE html>
    <title>Jquery Backoffice Filters Plugin</title>
    <meta name="description" content="A jquery plugin for generating a backoffice filter">

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="" type="text/javascript"></script>

    <link rel="stylesheet" media="all" href="">
    <link rel="stylesheet" media="all" href="">
    <link rel="stylesheet" media="all" href="">
  <div id="wrapper">
      <div id="filter"></div>

  <script type="text/javascript">
      function sendToServer(data){
          alert('sending params to server: ' + JSON.stringify(data));

      var devicesOptions = [{name: 'LGE', value: 'LGE'}, {name: 'Apple', value: 'Apple'}, {name: 'Samsung', value: 'Samsung'}],
              productOptions = [
                  {name: 'Product Name 1', value: 'product_name_1', selected: true},
                  {name: 'Product Name 2', value: 'product_name_2'},
                  {name: 'Product Name 3', value: 'product_name_3'},
                  {name: 'Product Name 4', value: 'product_name_4'},
                  {name: 'Product Name 5', value: 'product_name_5'},
                  {name: 'Product Name 6', value: 'product_name_6'},
              operatingSystemVersionOptions = [
                  {name: '8.1 (ios)', value: '8.1'},
                  {name: '8.2 (ios)', value: '8.2'},
                  {name: '5.5 (kitkat)', value: '5.5'}
              options = {
                  title: 'Simple Filter',
                  searchClickedCallback: sendToServer,
                  filterParameters: [
                      {type: 'text', attributeName: 'subject_id', name: 'Object ID', placeholder: 'placeholder text here'},
                      {type: 'date-range', attributeName: 'date_range', name: 'Date Range'},
                      {type: 'single', attributeName: 'productName',name: 'Product', options: productOptions},
                      {type: 'multi', attributeName: 'deviceName',name: 'Manufacturer', options: devicesOptions},





Configurable Options

  • title: 'Default Filter Title'
  • maxElementsInMultiBox: 3
  • dateFormat: 'DD-MM-YYYY'
  • selectBoxHeight: 180
  • borderColor: '#ddd'
  • showSearchButton: true
  • showBorders: true
  • globalPadding: '33px'
  • showShiftSelectMessage: true

filter Parameters

  • name - any name you want to display
  • value - any name your saver will identify
  • relatedTo - The field will cause this parameter to filter itself in relation to another filter for example: Filter 2 Option1 -> Filter 1 Option1 Filter 2 Option2 -> Filter 1 Option2

Selecting Filter 1 Option1 will REMOVE Option2 from Filter2


  • Jquery
  • Bootstrap 3
  • daterangepicker js
  • moment js
  • improvely (css only)



DWYWWI (Do Whatever You Want With It).

Love it?

compliments here -

Changes Log


adding support for text fields in the url.try it out.


adding a big feature. Saved filters will be shown on the url. Using the History.js libary.


adding feature - enable shift + multi select to checkboxes.


  • added auto focus on the search input on open select modal.


  • Added a clear button for the date range.
  • Added a search box for screening filter options.
You can’t perform that action at this time.