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.
Engine | Browser | Platform | Just a Date | Just a Number |
---|
$(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 } ]); });
//--------------------------------------------------------------------------- //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: Setcol0Data = 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));