Change the word Search to Filter

martinsebastian

Hello
I cannot for the life of me figure out the correct syntax for changing the word SEARCH to the word FILTER which really is way more fitting.
Here is my code:




$(document).ready(function() {
oTable = $('#example').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers"

});
} );


Also how do I put the FOCUS on the search/filter text box???
Thanks

fbas

the init object has an object oLanguage with values you can set (the one you want is sSearch. see Internationalization: http://www.datatables.net/release-datatables/examples/basic_init/language.html and http://www.datatables.net/ref#oLanguage )
[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers", // [Edit: forgot the comma here when first posted]
"oLanguage": {
"sSearch": "Filter: "
}
});
} ); [/code]

the dom element created for the filter is a div with id {tableid}_filter, i.e. "example_filter" if your table id is "example". In that div a is created, which has the value of sSearch. in that label is a

something like this should set focus:
[code]$('#example_filter label input:text').focus();[/code]

fbas

also worth pointing out that you can specify all your language elements in a separate file which is handy for multi-lingual sites.

http://www.datatables.net/release-datatables/examples/advanced_init/language_file.html

here's an example of a language file:
http://www.datatables.net/examples/examples_support/de_DE.txt

martinsebastian

Im getting a syntax error at this line in my editor:
"oLanguage": {

Here is my complete code:


$(document).ready(function() {
oTable = $('#example').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers"
"oLanguage": {
"sSearch": "Filter: "
}
});
} );

fbas

[code]
"sPaginationType": "full_numbers" // <------ missing comma
"oLanguage": {
[/code]

my bad for not catching that when I posted above.

martinsebastian

Oh wow! Thank you so much, its working great now. One last question if you don't mind? Where do I put this code:
$('#example_filter label input:text').focus();

fbas

I assume you want that when the page is initializing, so I'd put it after your oTable = $('#example').dataTable() call (because you need the sDom elements to be created), but inside the $(document).ready();

[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter: "
}
});

$('#example_filter label input:text').focus();

} );
[/code]

martinsebastian

Thank you again however its not working. When I inspect the item this is the code surrounding the text box:
[code]
FILTER:
[/code]

fbas

ok. take out "label"

[code]$('#example_filter input:text').focus();[/code]

martinsebastian

Wow! thank you again. These are things I have been trying to fix for days. Thanks again. These dataTables are so POWERFUL!