Simple jQuery Dropdown Table Filter Plugin - ddtf.js

File Size: 10.8 KB
Views Total: 41142
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Dropdown Table Filter Plugin - ddtf.js

ddtf.js is a really simple jQuery table filtering plugin which allows the visitor to filter table columns using dropdown lists.

How to use it:

1. Add jQuery library and the jQuery ddtf.js plugin to your html page.

<script src="//"></script>
<script src="ddtf.js"></script>

2. Call the function and the plugin will automatically convert the header cells into select based dropdown lists.


3. Customization options.

// A function that provides the hidden value of the cell. 
valueCallback:function() {
  return encodeURIComponent($.trim($(this).text()));

// A function that provides the value of the cell that is displayed in the dropdown. 
textCallback:function() {
  return $.trim($(this).text());

// A function to sort the options as they are added to the list.
sortOptCallback: function(a, b) {
  return a.text.toLowerCase() > b.text.toLowerCase();

// Callback functions
afterFilter: null,
afterBuild: null,

transition: {

  // remove rows from view.

  // bring rows back into view. 

  // An array of options to pass to the above two functions. 
  options: []

// Text to display for empty rows.

// This must be true for sortOptCallback to work.

// Debug mode

// Number of options required to show a select filter.

This awesome jQuery plugin is developed by rbayliss. For more Advanced Usages, please check the demo page or visit the official website.