Skip to content
Jquery + bootstrap filters rending out of the box for backoffice use
CSS JavaScript
Branch: master
Clone or download
Permalink
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
README.md change in email and demo url May 6, 2019
jquery.filters.js fix Feb 19, 2017
package.json 0.3.1 Oct 10, 2016

README.md

Filters

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

demo

Sample

Quick Start

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker.js"></script>
    <script src="https://cdn.rawgit.com/ohadpartuck/jquery-filters-plugin/v0.1.1/jquery.filters.js" type="text/javascript"></script>

    <link rel="stylesheet" media="all" href="https://cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/master/daterangepicker-bs3.css">
    <link rel="stylesheet" media="all" href="https://cdn.rawgit.com/ohadpartuck/jquery-filters-plugin/v0.1.1/css/jquery.filters.css">
    <link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
  <div id="wrapper">
      <div id="filter"></div>
  </div>

 </body>
  <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},
                  ]
              };

      $('#filter').bootstrapFilter(options);

  </script>

</html>

Usage

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

Dependencies

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

Demo

http://ohadperry.github.io/filter_demo/

Licence

DWYWWI (Do Whatever You Want With It).

Love it?

compliments here - ohad.perry9@gmail.com

Changes Log

V0.3.0

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

V0.1.8

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

V0.1.5

adding feature - enable shift + multi select to checkboxes.

V0.1.2

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

V0.1.1

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