v 1.5.3. Added support for {value, label} for the checkboxes.

Author: JocaPC

checkbox.html

@@ -36,8 +36,28 @@
 
 		<script type="text/javascript" charset="utf-8">
 			$(document).ready( function () {
-				$('#example').dataTable().columnFilter({ /*sPlaceHolder: "head:after",*/ aoColumns: [
-              {  type: "checkbox", values: null /*[ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Tasman', 'Webkit']*/ },{},{},{},{ type: "checkbox", values: [ 'A', 'B', 'C', 'U', 'X']  } ]});		
+				$('#example')
+					.dataTable()
+					.columnFilter(
+						{ /*sPlaceHolder: "head:after",*/ 
+							aoColumns:
+							[	{  type: "checkbox", values: null /*[ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Tasman', 'Webkit']*/ },
+								{},
+								{},
+								{},
+								{ 
+									type: "checkbox", 
+									values: 
+									[ 
+										{value: 'A', label: 'Grade A' },
+										{value: 'B', label: 'Grade B' },
+										{value: 'C', label: 'Grade C' },
+										'U',
+										'X'
+									]  
+								} 
+							]
+						});		
 			} );
 		</script>
         <script type="text/javascript">

media/js/jquery.dataTables.columnFilter.js

@@ -1,6 +1,6 @@
 /*
 * File:        jquery.dataTables.columnFilter.js
-* Version:     1.5.2.
+* Version:     1.5.3.
 * Author:      Jovan Popovic 
 * 
 * Copyright 2011-2014 Jovan Popovic, all rights reserved.
@@ -479,8 +479,16 @@
                     r += divClose + divRowDef;
                 }
 
+                var sLabel = aData[j];
+                var sValue = aData[j];
+
+                if (typeof (aData[j]) == 'object') {
+                    sLabel = aData[j].label;
+                    sValue = aData[j].value;
+                }
+
                 //check button
-                r += '<input class="search_init checkbox_filter" type="checkbox" id= "' + aData[j] + '" name= "' + localLabel + '" value="' + aData[j] + '" >' + aData[j] + '<br/>';
+                r += '<input class="search_init checkbox_filter" type="checkbox" id= "' + uniqueId + '_cb_' + sValue + '" name= "' + localLabel + '" value="' + sValue + '" >' + sLabel + '<br/>';
 
                 var checkbox = $(r);
                 th.html(checkbox);
@@ -506,13 +514,21 @@
 
                     });
 
+
+                    if (search != "") {
+                        $('input:checkbox[name="' + localLabel + '"]').removeClass("search_init");
+                    } else {
+                        $('input:checkbox[name="' + localLabel + '"]').addClass("search_init");
+                    }
+                    /* Old code for setting search_init CSS class on checkboxes if any of them is checked
                     for (var jj = 0; jj < iLen; jj++) {
                         if (search != "") {
                             $('#' + aData[jj]).removeClass("search_init");
                         } else {
                             $('#' + aData[jj]).addClass("search_init");
                         }
                     }
+                    */
 
                     //execute search
                     oTable.fnFilter(search, index, true, false);

serverSideInitFilter.html

@@ -41,20 +41,35 @@
 			var oSettings = $dt.fnSettings();
 			oSettings.aoPreSearchCols[ 0 ].sSearch = "Trident";
 			oSettings.aoPreSearchCols[ 1 ].sSearch = "5";
+			oSettings.aoPreSearchCols[ 4 ].sSearch = "C";
 			//$dt.fnDraw();
 
 			$dt.columnFilter({
 				aoColumns: [
 						{ type: "select", values: [ 'Gecko', 'Trident "New"', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
 						{ type: "text" },
 						{ type: "text" },
-						{ type: "text" }
+						{ type: "text" },
+						{
+							type: "checkbox",
+							values:
+							[
+								{ value: 'A', label: 'Grade A' },
+								{ value: 'B', label: 'Grade B' },
+								{ value: 'C', label: 'Grade C' },
+								'U',
+								'X'
+							]
+						}
 					]
 			});
 
 			$("[rel=0]", $dt).val("Trident");
 			$("[rel=1]", $dt).val("5");
-				
+			$("div[rel=4] input[type=checkbox][value=C]")
+				.each(function() {
+					this.checked = true;
+				});
 			} );
 		</script>
         <script type="text/javascript">