Fork me on GitHub
Like it? Star it! Want it? Fork it! And also follow ;)
Follow @danielreznick Tweet
Check out my other jQuery plug-in: Feedback MeCheck out my AngularJS Directive: Color Picker

Yet Another DataTables Column Filter (yadcf) 0.9.3.beta

Server side source example

This 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 View source All params
Notice the pre filtered columns ("Engine" & "Just a Date" columns are pre filtered with the exFilterColumn function)
Engine Browser Platform Just a Date Just a Number
Features:
Usage - Client(on this page example):
					$(document).ready(function () {
						'use strict';
						    
						oTable = $('.entrys_table').DataTable({
							"colReorder": true,
							"processing": true,
							"serverSide": true,
						    "ajax": {
					            "url": "entrys_table_server_side_source",
					            "type": "POST"
						    },
						    "language": {
						        "infoFiltered": " - filtered from _MAX_ records"
						    },
						    "columns": [
						    	{ data: "engine" },
								{ data: "browser" },
								{ data: "platform" },
								{ data: "date" },
								{ data: "number" }
					        ],
					        stateSave":  true
					    })
					    yadcf.init(oTable, [
							{
								column_number: 0,
								filter_type: "multi_select",
								select_type: 'chosen'
							},
							{
								 column_number: 1,
								 filter_type: "text",
								 filter_delay: 500
							},
							{
								column_number: 2,
								filter_type: "auto_complete"
							},
							{
								column_number: 3,
								filter_type: "range_date",
								date_format: "mm/dd/yyyy",
								filter_delay: 500
							},
							{
								column_number: 4,
								filter_type: "range_number",
								filter_delay: 500
							}
						]);
				});
					
Usage - Server(on this page example):
					//---------------------------------------------------------------------------
					//Get filters values from client request
					//---------------------------------------------------------------------------
					protected void doGet(HttpServletRequest req, HttpServletResponse resp)
							throws ServletException, IOException {
						
						
						int start = Integer.parseInt(req.getParameter("start"));
						int length = Integer.parseInt(req.getParameter("length"));
						String globalSearch = req.getParameter("search[value]");
						String sSearch_0 = req.getParameter("columns[0][search][value]");
						String sSearch_1 = req.getParameter("columns[1][search][value]");
						String sSearch_2 = req.getParameter("columns[2][search][value]");
						String sSearch_3 = req.getParameter("columns[3][search][value]");
						String sSearch_4 = req.getParameter("columns[4][search][value]");
						
					//then use the above string to do the filtering....
					//---------------------------------------------------------------------------	
					//---------------------------------------------------------------------------
					
					//In case that you want to populate your select / auto_complete filters with values
					//you have to add to your current JSON the following attributes yadcf_data_0 / yadcf_data_1 / etc'
					//where each attribute contains a list of strings
					//For example: 
					//"yadcf_data_0":["KHTML","Webkit","Trident","Misc","Other browsers","Tasman","Presto","Gecko"],
					//"yadcf_data_1":["Nintendo DS browser","Netscape Browser 8","All others","Lynx","Mozilla 1.6","Mozilla 1.5","Mozilla 1.8","AOL browser (AOL desktop)","Mozilla 1.7","Mozilla 1.0","NetFront 3.1","NetFront 3.4","Mozilla 1.2","Mozilla 1.1","Mozilla 1.4","Mozilla 1.3","iPod Touch / iPhone","Camino 1.0","Firefox 1.0","Safari 1.3","Safari 1.2","Safari 2.0","Internet Explorer 5.5","Firefox 1.5","Safari 3.0","Internet Explorer 5.0","Camino 1.5","Internet Explorer 5.1","Internet Explorer 5.2","Konqureror 3.3","Opera 7.0","Konqureror 3.5","Internet Explorer 4.0","Netscape Navigator 9","Konqureror 3.1","S60","Opera 8.0","Internet Explorer 4.5","Firefox 2.0","Opera 8.5","IE Mobile","Netscape 7.2","Firefox 3.0","Opera for Wii","Opera 7.5","Internet Explorer 6","Internet Explorer 7","Opera 9.0","Seamonkey 1.1","Epiphany 2.20","Opera 9.5","PSP browser","Opera 9.2","Links","Nokia N800","OmniWeb 5.5","Dillo 0.8"],
					//"yadcf_data_2":["N800","Win 95+ / Mac OS 8.6-9.2","S60","KDE 3.5","Win XP SP2+","KDE 3.3","OSX.3","KDE 3.1","Embedded devices","Win 95+ / OSX.3+","Win 98+ / OSX.2+","Mac OS 8-9","OSX.4+","Win 95+ / OSX.1+","Win 2k+ / OSX.3+","Win 95+","Nintendo DS","OSX.2+","iPod","Win 98SE+","Gnome","Mac OS 7.6-9","Win 98+ / OSX.1+","Windows Mobile 6","-","Win 95+ / OSX.2+","OSX.3+","Mac OS 8-X","PSP","Win XP","Text only","Win 98+","Win 88+ / OSX.3+","Wii"]
					//
					//Java example:
					Set  col0Data = new HashSet();
					Set  col1Data = new HashSet();
					Set  col2Data = new HashSet();
					Set  col4Data = new HashSet();
					for (EntryDb entry : entrys) {
						col0Data.add(entry.getEngine());
						col1Data.add(entry.getBrowser());
						col2Data.add(entry.getPlatform());
					}
					col4Data.add("0");
					col4Data.add("134");
					
					tableAaData = new TableAaDataServerSide(aaData);
					tableAaData.setRecordsTotal(entrys.size());
					tableAaData.setRecordsFiltered(aaData.size());
					tableAaData.setDraw(req.getParameter("draw"));
					
					tableAaData.setYadcf_data_0(new ArrayList(col0Data));
					tableAaData.setYadcf_data_1(new ArrayList(col1Data));
					tableAaData.setYadcf_data_2(new ArrayList(col2Data));
					tableAaData.setYadcf_data_4(new ArrayList(col4Data));
					
					
					resp.setContentType("application/json");
					resp.setCharacterEncoding("UTF-8");
					log.info("Return value to Entrys table:\t"+ new Gson().toJson(tableAaData));
					resp.getWriter().write(new Gson().toJson(tableAaData));
					
All available parameters (detailed documentation inside jquery.dataTables.yadcf.0.9.2.js):