Yet Another DataTables Column Filter (yadcf)

Yet Another DataTables Column Filter (yadcf) is a jQuery plug-in allows the user to easily add filter components to table columns, the plug-in works on top of the DataTables jQuery plug-in.

Features:

• Support DataTables 1.10.0-beta.2
• Various filter options:
  • select input
  • multiple selection input
  • text input
  • autocomplete input - make use of the jQuery UI Autocomplete widget (with some enhancements)
  • date input - make use of the jQuery UI Datepicker widget (with some enhancements)
  • range of numbers
  • range of numbers with slider widget - make use of the jQuery UI Slider widget (with some enhancements)
  • range of dates - make use of the jQuery UI Datepicker widget (with some enhancements)
• Parsing various types of columns:
  • plain text
  • plain text with delimiter
  • one or more HTML elements with the ability to extract text / value / id from each HTML element
• Multiple tables support
• CSS support:
  • each filter element has got a css style class , so its style can be easily overridden
  • Reset button for filter:
  • next to each filter a reset button will appear (this button allows the user to reset the filter)
• Filter in use visual notification:
  • when a certain filter is being used it will be highlighted (the color of highlight can easily be changed with css)
• Miscellaneous:
  • integration with the Chosen plugin (for single and multiple select)
  • filter delay (for text filter)
  • predefined data source for filter (array of strings or objects)
  • mData support (including deeply nested objects)
  • ability to place the filter in an external html element (for example: inside a div element)
  • ability to control matching mode of the filter (Possible values: contains / exact / startsWith)
  • change the filter's default label (Select value, etc)
  • change the filter's reset button text (x, clear etc)
  • define how the values in the filter will be sorted
  • define the order in which the values in the filter will be sorted
  • support all major browser (including IE8)
  • define in which date format the date will be parsed and displayed in datepicker widget
  • support aoColumns { "bVisible": false }
  • support for case sensitive filtering
• External API functions:
  • exFilterColumn: Allows to trigger filter/s externally/programmatically (support ALL filter types!!!) , perfect for showing table with pre filtered columns
  • exGetColumnFilterVal: Allows to retreive column current filtered value (support ALL filter types!!!)
• Notable datatables API support
  • bStateSave / bDeferRender

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="jquery.dataTables.yadcf.js"></script>

2. HTML

<div id="external_filter_container_wrapper">
	<label>External filter for "Numbers" column :</label>
	<div id="external_filter_container"></div>
</div>
<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>

3. JAVASCRIPT

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

4. OPTIONS

column_number: The number of the column to which the filter will be applied

DOM source example

DOM source with chosen example

AJAX source example

AJAX mData (deep) example

Multiple tables example

DOM Ajax Multiple 1.10 beta 2 example