Turkish charachter problem for datatable search box
Turkish charachter problem for datatable search box
Hi Allan,
I am trying to search and filter(from table) in Azerbaijan language, but i have some problem.I want to find some word containing the letter "İ" or "I"(uppercase).For example: " İqbal ". When i enter " iqbal ", i can not to find it from table. But When i enter " İqbal ", i can find. I have the same problem with letters "i" and " ı "(lowercase)
When i _search for “ıyı”, i can not find “IYI”*
I am working in mvc
This is script.
$(function () {
$('#example').dataTable({
"language": {
// "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Azerbaijan.json",
"sEmptyTable": "Cədvəldə heç bir məlumat yoxdur",
"sInfo": " _TOTAL_ Nəticədən _START_ - _END_ Arası Nəticələr",
"lengthMenu": "Səhifədə _MENU_ Nəticə Göstər",
"sZeroRecords": "Nəticə Tapılmadı.",
"sInfoEmpty": "Nəticə Yoxdur",
"sInfoFiltered": "( _MAX_ Nəticə İçindən Tapılanlar)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLoadingRecords": "Yüklənir...",
"sProcessing": "Gözləyin...",
"sSearch": "Axtarış:",
"sZeroRecords": "Nəticə Tapılmadı.",
"oPaginate": {
"sFirst": "İlk",
"sLast": "Axırıncı",
"sNext": "Sonraki",
"sPrevious": "Öncəki"
},
"oAria": {
"sSortAscending": ": sütunu artma sırası üzərə aktiv etmək",
"sSortDescending": ": sütunu azalma sırası üzərə aktiv etmək"
}
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"Paginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
//"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"placeholder": " ",
});
$('#example thead #yaya').each(function () {
var title = $(this).text();
$(this).html(title + '<input type="text" placeholder=" " />');
});
var table = $('#example').DataTable();
// Apply the search
table.columns('#yaya').every(function () {
var that = this;
$('input', this.header()).on('keyup change', function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
table.columns('.select-filter').every(function () {
var that = this;
// Create the select list and search operation
var select = $('<select id="sel"><option value=""></option></select>').appendTo(this.header()).on('change', function () {
that.search($(this).val()).draw();
});
// Get the search data for the first column and add to the select list
this.cache('search').sort().unique().each(function (d) {
select.append($('<option value="' + d + '">' + d + '</option>'));
});
});
$('#test').click(function () {
var table = $('#example').DataTable();
$('#min, #max').val('');
$('input').val('');
$("#sel").val([]).change();
table.search('').columns().search('').draw();
});
});
And this is part of my Layout page
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script>
Answers
.
I added this script, but dropdown list of select filter shows me two values
jQuery.fn.DataTable.ext.type.search.string = function (sVal) {
var letters = { "İ": "i", "I": "ı","i": "İ", "ı": "I" };
return sVal.replace(/(([İI]))/g, function (letter) { return letters[letter]; }) ;
};
Teşekkür ederim gardaşım, işime yaradı. ?