anyone implement the Accent neutralise with datatable filter?
there is a jquery datatable plugin "Accent neutralise", but I am not sure how to apply it to pf datatable?
any suggestions?
I am using primeface 6.0, jsf 2.0
thanks,
Accent neutralise with datatable
-
- Posts: 277
- Joined: 08 Jul 2013, 17:53
Couldn't you just do it the way that plugin's documentation suggests?
Yes, I did try using the examples in the document, but got error
Code: Select all
$(document).ready(function() {
// $('#example').dataTable(); - in plugin's documentation examples
// as my datatable inside a dynamic accordion tab, so look for id contains the name "myDocDataTable
$('div[id*="myDocDataTable"]').dataTable();
} );
$(document).ready(function() {
// $('#example').dataTable();
PF('docTable').dataTable(); // not sure if this is the right way to call the datatable elment
} );
error: $().dataTable is not a function. Do I need to include the jquery? but I thought the primeface already include its own jquery.
another way I tried is to replace the globalfilter input string with somethign like phrase = phrase.replace('z', "[z....]");
then call : PF('docTable').filter(). But how to use the modifed search phrase to replace the orignial unput string in the Pf filter() function?
do I need to modify the java class? can I do it at the client side?
another way I tried is to replace the globalfilter input string with somethign like phrase = phrase.replace('z', "[z....]");
then call : PF('docTable').filter(). But how to use the modifed search phrase to replace the orignial unput string in the Pf filter() function?
do I need to modify the java class? can I do it at the client side?
it seems like that I can extend the pf datatable filter() function from client side. but I am not quite sure the actual steps, any documentation of this js function? anyone has done this?
Code: Select all
PrimeFaces.widget.DataTable = PrimeFaces.widget.DataTable.extend({
filter: function() {
var phrase = this.value;
phrase = phrase.replace('a', "[aXXX]");
???? then what to do?
}
})
Hi, I have implemented a function in JS that makes me searching ignoring accents in the filters.
EDIT: THIS IS FOR SelectOneMenu, PickList, SelectCheck..... for datatable look down
I put here the code if it's any help.
In the p:colum of the datatable put the attributes:
Then, create a file called filtros.js with the following content (already created to work with JSF):
I have it located in webapp / scripts
Finally, you have to do is include the filtros.js in your html file for can to use the functions of filters in the datatable. If you have a global template you can include it there so that it can be used from any page that uses the template.
Finally let you know that there are four types of filters that can use the nomenclature for use in the p: column as filterFunction is:
Hope this can help you
EDIT: THIS IS FOR SelectOneMenu, PickList, SelectCheck..... for datatable look down
I put here the code if it's any help.
In the p:colum of the datatable put the attributes:
Code: Select all
filterMatchMode="custom" filterFunction="filtroConstainsSinAcentos"
I have it located in webapp / scripts
Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<ui:composition>
<script type="text/javascript">
//<![CDATA[
var defaultDiacriticsRemovalap = [{
'base': 'A',
'letters': '\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F'
}, {
'base': 'AA',
'letters': '\uA732'
}, {
'base': 'AE',
'letters': '\u00C6\u01FC\u01E2'
}, {
'base': 'AO',
'letters': '\uA734'
}, {
'base': 'AU',
'letters': '\uA736'
}, {
'base': 'AV',
'letters': '\uA738\uA73A'
}, {
'base': 'AY',
'letters': '\uA73C'
}, {
'base': 'B',
'letters': '\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181'
}, {
'base': 'C',
'letters': '\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E'
}, {
'base': 'D',
'letters': '\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779'
}, {
'base': 'DZ',
'letters': '\u01F1\u01C4'
}, {
'base': 'Dz',
'letters': '\u01F2\u01C5'
}, {
'base': 'E',
'letters': '\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E'
}, {
'base': 'F',
'letters': '\u0046\u24BB\uFF26\u1E1E\u0191\uA77B'
}, {
'base': 'G',
'letters': '\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E'
}, {
'base': 'H',
'letters': '\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D'
}, {
'base': 'I',
'letters': '\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197'
}, {
'base': 'J',
'letters': '\u004A\u24BF\uFF2A\u0134\u0248'
}, {
'base': 'K',
'letters': '\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2'
}, {
'base': 'L',
'letters': '\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780'
}, {
'base': 'LJ',
'letters': '\u01C7'
}, {
'base': 'Lj',
'letters': '\u01C8'
}, {
'base': 'M',
'letters': '\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C'
}, {
'base': 'N',
'letters': '\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4'
}, {
'base': 'NJ',
'letters': '\u01CA'
}, {
'base': 'Nj',
'letters': '\u01CB'
}, {
'base': 'O',
'letters': '\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C'
}, {
'base': 'OI',
'letters': '\u01A2'
}, {
'base': 'OO',
'letters': '\uA74E'
}, {
'base': 'OU',
'letters': '\u0222'
}, {
'base': 'P',
'letters': '\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754'
}, {
'base': 'Q',
'letters': '\u0051\u24C6\uFF31\uA756\uA758\u024A'
}, {
'base': 'R',
'letters': '\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782'
}, {
'base': 'S',
'letters': '\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784'
}, {
'base': 'T',
'letters': '\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786'
}, {
'base': 'TZ',
'letters': '\uA728'
}, {
'base': 'U',
'letters': '\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244'
}, {
'base': 'V',
'letters': '\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245'
}, {
'base': 'VY',
'letters': '\uA760'
}, {
'base': 'W',
'letters': '\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72'
}, {
'base': 'X',
'letters': '\u0058\u24CD\uFF38\u1E8A\u1E8C'
}, {
'base': 'Y',
'letters': '\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE'
}, {
'base': 'Z',
'letters': '\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762'
}, {
'base': 'a',
'letters': '\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250'
}, {
'base': 'aa',
'letters': '\uA733'
}, {
'base': 'ae',
'letters': '\u00E6\u01FD\u01E3'
}, {
'base': 'ao',
'letters': '\uA735'
}, {
'base': 'au',
'letters': '\uA737'
}, {
'base': 'av',
'letters': '\uA739\uA73B'
}, {
'base': 'ay',
'letters': '\uA73D'
}, {
'base': 'b',
'letters': '\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253'
}, {
'base': 'c',
'letters': '\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184'
}, {
'base': 'd',
'letters': '\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A'
}, {
'base': 'dz',
'letters': '\u01F3\u01C6'
}, {
'base': 'e',
'letters': '\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD'
}, {
'base': 'f',
'letters': '\u0066\u24D5\uFF46\u1E1F\u0192\uA77C'
}, {
'base': 'g',
'letters': '\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F'
}, {
'base': 'h',
'letters': '\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265'
}, {
'base': 'hv',
'letters': '\u0195'
}, {
'base': 'i',
'letters': '\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131'
}, {
'base': 'j',
'letters': '\u006A\u24D9\uFF4A\u0135\u01F0\u0249'
}, {
'base': 'k',
'letters': '\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3'
}, {
'base': 'l',
'letters': '\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747'
}, {
'base': 'lj',
'letters': '\u01C9'
}, {
'base': 'm',
'letters': '\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F'
}, {
'base': 'n',
'letters': '\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5'
}, {
'base': 'nj',
'letters': '\u01CC'
}, {
'base': 'o',
'letters': '\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275'
}, {
'base': 'oi',
'letters': '\u01A3'
}, {
'base': 'ou',
'letters': '\u0223'
}, {
'base': 'oo',
'letters': '\uA74F'
}, {
'base': 'p',
'letters': '\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755'
}, {
'base': 'q',
'letters': '\u0071\u24E0\uFF51\u024B\uA757\uA759'
}, {
'base': 'r',
'letters': '\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783'
}, {
'base': 's',
'letters': '\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B'
}, {
'base': 't',
'letters': '\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787'
}, {
'base': 'tz',
'letters': '\uA729'
}, {
'base': 'u',
'letters': '\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289'
}, {
'base': 'v',
'letters': '\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C'
}, {
'base': 'vy',
'letters': '\uA761'
}, {
'base': 'w',
'letters': '\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73'
}, {
'base': 'x',
'letters': '\u0078\u24E7\uFF58\u1E8B\u1E8D'
}, {
'base': 'y',
'letters': '\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF'
}, {
'base': 'z',
'letters': '\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763'
}];
var diacriticsMap = {};
for (var i = 0; i < defaultDiacriticsRemovalap.length; i++) {
var letters = defaultDiacriticsRemovalap[i].letters.split("");
for (var j = 0; j < letters.length; j++) {
diacriticsMap[letters[j]] = defaultDiacriticsRemovalap[i].base;
}
}
function filtroConstainsSinAcentos(itemLabel, filterValue){
return (removeDiacritics(itemLabel).indexOf(removeDiacritics(filterValue)) > -1);
}
function filtroStartWithSinAcentos(itemLabel, filterValue){
return (removeDiacritics(itemLabel).indexOf(removeDiacritics(filterValue)) === 0);
}
function filtroEndsWithSinAcentos(itemLabel, filterValue){
return (removeDiacritics(itemLabel).match(filterValue+"$") == removeDiacritics(filterValue));
}
function filtroExactSinAcentos(itemLabel, filterValue){
var math = (removeDiacritics(itemLabel).match(filterValue+"$"));
return (math != null && removeDiacritics(filterValue) == math[0]);
}
function removeDiacritics(str) {
return str.replace(/[^\u0000-\u007E]/g, function(a) {
return diacriticsMap[a] || a;
});
}
//]]></script>
</ui:composition>
</html>
Finally, you have to do is include the filtros.js in your html file for can to use the functions of filters in the datatable. If you have a global template you can include it there so that it can be used from any page that uses the template.
Code: Select all
<ui:include src="/scripts/filtros.js"/>
- filtroConstainsSinAcentos : Filter results that contain the filter text.
- filtroStartWithSinAcentos : Filter the results that begin with the text filter.
- filtroEndsWithSinAcentos : Filter the results that end with the filter text.
- filtroExactSinAcentos : Filter the results are the same as the text filter.
Hope this can help you
Last edited by nokiajavi on 26 Sep 2016, 17:16, edited 1 time in total.
Hi nokiajavi,
the test didn't go through. maybe because the version is different? I am using PF 6.0.
got the error: Illegal filter match mode:custom
I checked the Pf document, it seems doesn't need "filterMatchMode="custom"".
when i took out that, used:
got this error: java.lang.NumberFormatException: For input string: "filtroConstainsSinAcentos"
It seems that the property filterFunction is passed as a String to the primefaces javascript code so this can't be used as a function. From this post, it is fixed in pf 5 version ( but not in pf 6.0?)
http://stackoverflow.com/questions/1927 ... s-picklist
are you able to implement this in PF 6? or use it with globalFilter in PF 5?
thanks,
the test didn't go through. maybe because the version is different? I am using PF 6.0.
Code: Select all
filterMatchMode="custom" filterFunction="filtroConstainsSinAcentos"
I checked the Pf document, it seems doesn't need "filterMatchMode="custom"".
when i took out that, used:
Code: Select all
filterFunction="filtroConstainsSinAcentos"
It seems that the property filterFunction is passed as a String to the primefaces javascript code so this can't be used as a function. From this post, it is fixed in pf 5 version ( but not in pf 6.0?)
http://stackoverflow.com/questions/1927 ... s-picklist
are you able to implement this in PF 6? or use it with globalFilter in PF 5?
thanks,
I use PF 6.0
Sorry, you're absolutely right, the above code of the custom is compatible with the p: selectOneMenu, picklist etc ...
I confused by putting the role of selectOneMenu.
For the p: datatable, you must use a function in the bean:
XHTML
Here's the datatable you should use our custom filter.
beanForm.java
Here we implement the filter datatable currently ignores the shift change and the filter is true if it contains
Util.java
this method is responsible for replacing the accents for the letter without accents
I hope now if you serve, excuse the misunderstanding, anyway if you need to apply the function to selectOneMenu already have here the code.
If you doubt me you comment.
Sorry, you're absolutely right, the above code of the custom is compatible with the p: selectOneMenu, picklist etc ...
I confused by putting the role of selectOneMenu.
For the p: datatable, you must use a function in the bean:
XHTML
Here's the datatable you should use our custom filter.
Code: Select all
<p:column filterBy="#{bean.name}" filterFunction="#{beanForm.filterContainsWithoutAccents}" >
<h:outputText value="#{bean.name}" />
</p:column>
Here we implement the filter datatable currently ignores the shift change and the filter is true if it contains
Code: Select all
public boolean filterContainsWithoutAccents(Object value, Object filter, Locale locale) {
String filterText = (filter == null) ? null : filter.toString().trim();
if(StringUtils.isBlank(filterText)) {
return true;
}
if(value == null) {
return false;
}
return StringUtils.containsIgnoreCase(Util.quitarAcentos((String)value), Util.quitarAcentos(filterText));
}
this method is responsible for replacing the accents for the letter without accents
Code: Select all
/**
* Quitar acentos.
*
* @param str the str
* @return the string
*/
public String quitarAcentos(String str) {
String cadena;
cadena = Normalizer.normalize(str, Normalizer.Form.NFD);
cadena = cadena.replaceAll("\\p{InCombiningDiacriticalMarks}+", "");
return cadena;
}
I hope now if you serve, excuse the misunderstanding, anyway if you need to apply the function to selectOneMenu already have here the code.
If you doubt me you comment.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 26 guests