Powerful jQuery Data Table Column Filter Plugin - yadcf

File Size: 68.8 KB
Views Total: 27830
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Powerful jQuery Data Table Column Filter Plugin - yadcf

yadcf is yet another data table column filter plugin for jQuery that integrates with jQuery DataTables Plugin to make your data tables sortable, filterable and searchable. With this plugin, you can add various types of filters to each column of your data table. Licensed under the both GPL and BSD.

Basic Usage:

1. Load the latest jQuery javascript library from google CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Include jQuery Yet Another DataTables Column Filter Plugin on the web page

<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="jquery.dataTables.yadcf.js"></script>

3. Include required jQuery DataTables Plugin on the page

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="jquery.dataTables.min.js"></script>

4. Include jQuery UI for autocomplete input (optional)

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

5. The HTML

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Some Data</th>
<th>Numbers</th>
<th>Yes / No</th>
<th>Values</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Some Data 1</td>
<td>1000</td>
<td>Yes</td>
<td>a_value,b_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="even gradeC">
<td>Some Data 2</td>
<td>22</td>
<td>No</td>
<td>b_value,c_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
</tr>
<tr class="odd gradeA">
<td>Some Data 3</td>
<td>33</td>
<td>Yes</td>
<td>a_value</td>
<td><span class="label lightblue">Tag2</span><span class="label lightblue">Tag3</span></td>
</tr>
<tr class="even gradeA">
<td>Some Data 4</td>
<td>44</td>
<td>No</td>
<td>b_value</td>
<td><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="odd gradeA">
<td>Some Data 5</td>
<td>55</td>
<td>Yes</td>
<td>a_value,b_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="even gradeA">
<td>Some Data 1</td>
<td>111</td>
<td>No</td>
<td>c_value,d_value</td>
<td><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 2</td>
<td>22</td>
<td>Yes</td>
<td>e_value,f_value</td>
<td><span class="label lightblue">Tag3</span><span class="label lightblue">Tag4</span><span class="label lightblue">Tag5</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 3</td>
<td>33</td>
<td>No</td>
<td>a_value,bb_value</td>
<td><span class="label lightblue">Tag5</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 4</td>
<td>44</td>
<td>Yes</td>
<td>a_value,f_value</td>
<td><span class="label lightblue">Tag4</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 5</td>
<td>55</td>
<td>No</td>
<td>a_value,c_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 1</td>
<td>10</td>
<td>Yes</td>
<td>a_value,b_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 2</td>
<td>22</td>
<td>No</td>
<td>d_value,aa_value</td>
<td><span class="label lightblue">Tag1</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 3</td>
<td>33</td>
<td>Yes</td>
<td>a_value,c_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 4</td>
<td>44</td>
<td>No</td>
<td>a_value,bb_value</td>
<td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 5</td>
<td>55</td>
<td>Yes</td>
<td>c_value,e_value</td>
<td><span class="label lightblue">Tag2</span></td>
</tr>
<tr class="gradeA">
<td>Some Data 1</td>
<td>101</td>
<td>No</td>
<td>a_value,e_value</td>
<td><span class="label lightblue">Tag1</span></td>
</tr>
</tbody>
</table>

6. The javascript

<script>
$(document).ready(function(){
$('#example').dataTable().yadcf([
{column_number : 0},
{column_number : 1, filter_container_id: "external_filter_container", sort_as: "num"},
{column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
{column_number : 3, text_data_delimiter: ",", enable_auto_complete: true},
{column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});
</script>

About Author:

Author: Daniel Reznick

Homepage: http://yadcf-showcase.appspot.com/

Project Page: https://github.com/vedmack/yadcf/

Dual licensed under two licenses: GPL v2 license or a BSD (3-point) license.

Change log:

v0.9.1 (2017-03-04)

  • Added support to AMD and CommonJS 
  • Improved filter values alpha numeric sorting, sort_as: "alphaNum"
  • Fixed autocomplete in cumulative mode filtering
  • Fixed chosen in cumulative mode filtering 
  • Support jQuery 3 (for .dataTable({}).yadcf api) 
  • Fixed chosen with serverSide: true 
  • Some of additional fixed issues

v0.7.4 (2014-06-15)

  • Added optional delay (usage example filter_delay: 1000) for filter_type: "text" (allows to delay filtering while typing characters)
  • Allow hide filter reset button for filter_type: "multi_select" 
  • Added placeholder for multiple select mode (without Chosen integration) 

v0.7.2 (2014-06-02)

  • Added another external API function : exGetColumnFilterVal, Allows to retreive column current filtered value (support ALL filter types!!!) 
  • "data" property supports array of objects {value: 'Some Data 1', label: 'One'}, {value: 'Some Data 3', label: 'Three'} h
  • Bug fix 
  • Several code optimizations

v0.6.9 (2014-04-27)

  • Added new filter type: multiple selection, filter_type: "multi_select". With or without Chosen plugin support (select_type: 'chosen').

v0.6.5 (2014-04-15)

  • Bug fix

v0.6.4 (2014-03-22)

  • Bug fix

v0.6.3 (2014-03-21)

  • Added new filter type: text input (a simple input text) filter_type: "text"
  • Added new feature: case_insensitive, can be set to false or true (default) 
  • Added new mode "startsWith" for filter_match_mode 

v0.6.0 (2014-03-21)

  • Added integration with Chosen plugin (for the select filter)
  • For the integration with Chosen: added two new attributes, 'select_type' to allow turning of simple select into chosen select and 'select_type_options' used to pass an object to the chosen constructor , don't forget to include the chosen js file and read/look at the docs/showcase

v0.5.0 (2013-12-19)

  • Added support for mData (including deeply nested objects) 
  • Bug fix

v0.4.6 (2013-12-02)

  • Added first external API function : exFilterColumn, allows to trigger filter externally/programmatically (currently support only filter_type : "select") , perfect for showing table after its being filtered (onload)
  • Added support for aoColumns { "bVisible": false }
  • Added support for column_data_type & html_data_type in Range Number Slider Filter 

v0.4.0 (2013-10-30)

  • Added new filter type: range between two dates with jQuery UI Datepicker widget, filter_type: "range_number_slider" 
  • Added new attribute to yadcf constructor: date_format, it defines the format in which the date values are being parsed into Date object and also in which format the datepicker will display the selected dates, default value: "mm/dd/yyyy"

v0.3.8 (2013-10-01)

  • Added new filter type: range between two numbers with slider widget
  • IE8 bugfix

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