FAQ: How do I replace the search label? Either the text or as a placeholder attribute.

philip

Curious how others have modified their search fields so here's what may begin a related FAQ. It may (or may not) be the ideal way so hopefully someone will confirm. Works for me, though.

Question: How do I replace the search label? Either the text or as a placeholder attribute instead?

Answer: Use the language option, where you can modify (or remove) the search label and/or insert a placeholder attribute.

For example, the following replaces the "Search" label with a font awesome filter icon, and also inserts "filter records" as a placeholder attribute.

$('#example').DataTable( {
"language": { 
    search: '<i class="fa fa-filter" aria-hidden="true"></i>',
    searchPlaceholder: 'filter records'
}

Related documentation: language.searchPlaceholder, language.search, and language.

Note: In previous versions of DataTables, the oLanguage option existed but it's deprecated and not recommended.

kthorngren

Awesome! I like it and will probably use it in my projects.

Kevin