JQuery datatablejs 土耳其语字符搜索问题

问题描述 投票:0回答:5

我有一个 jquery datatablejs。我列出项目。我想在搜索中搜索一些东西。但是当我输入 ï 时,它只找到 ï 字符。 我也想找到 i 个字符。 就像 I-ı Ü-ü。

我搜索了很多网站/文档,但什么也没找到。

下面的此链接定义了用于排序的土耳其语字符。我们可以用它来搜索吗? 另一个问题是或者我们可以说我的约束是我无法更改数据表的原始数据。我无法将 ï 替换为 i 或将 i 替换为 ï。

https://datatables.net/plug-ins/sorting/turkish-string

注意:我正在使用 ajax 从 mvc 控制器获取数据。我没有获取 json 数据。我得到模型对象。

javascript html jquery model-view-controller datatables
5个回答
1
投票

将文件的编码更改为 UTF-8 并重新输入字符并保存。测试一下。
[ { "Numara": "şükrü yağcı", “广告”:“5505” }, { “Numara”:“şamil öndüş”, “广告”:“6655” }, {


1
投票

您可以使用DataTables提供的以下插件:

变音符号中和

这可以包含在您的 HTML 页面中,如下所示:

https://cdn.datatables.net/plug-ins/1.10.21/filtering/type-based/diacritics-neutralise.js

但是,要有效地使用此插件来满足您的要求,需要一些额外的步骤,以便用户实际上看不到数据更改。

概述

  1. 向数据表添加隐藏但可搜索的额外列。此列将包含表中其他列中所有文本的“规范化”版本(如下所述)。如果某个单词的规范化形式与原始非规范化形式不同,则只需在此列中存储该单词即可。

  2. 添加自定义搜索功能,对用户输入的搜索词执行相同的规范化过程。

这意味着用户可以对

i
I
İ
进行任何搜索 - 并且它将成功找到包含这些字符之一的任何行。

这里的关键部分是我们对表数据和搜索数据应用完全相同的标准化过程。

处理表数据

如果您对表中要显示的数据有完全的控制权,则可以在将数据发送到数据表之前执行步骤(1)。您只需将该列定义为隐藏即可:

"columnDefs": [
  {
    "targets": [ -1 ], // -1 refers to the final column in the table
    "visible": false,
    "searchable": true
  }
]

这要求您拥有与我们将使用的“变音符号中和”功能提供的功能相同的服务器端功能。如果这不是一个选项,您可能更喜欢使用函数来处理表本身中的数据:

"columnDefs": [
  {
    "targets": [ -1 ], // -1 refers to the final column in the table
    "visible": false,
    "searchable": true,
    "data": function ( row, type, val, meta ) {
      return normalizeTableData( row ); // see below!
    }
  }
]

处理搜索词

为了标准化搜索词,我们可以使用以下 DataTables 搜索功能:

$('#example_filter input').off().keyup(function () {
  var normString = normalizeString( this.value ); // see below!
  table.search(normString).draw();
});

这假设我们的 HTML 表的 ID 为“example”。

执行标准化

该函数的使用方法如下:

var normString = jQuery.fn.DataTable.ext.type.search.string(inputString);

如果您查看此函数的 JavaScript,您会发现它包含许多映射 - 例如:

{'base':'I', 'letters':/[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g}

I
的土耳其语大写字母是
İ
,它的Unicode值是u0130。您可以看到它被列为在提供的映射中映射到
I
的字符之一。

所以,我们的

normalizeString
函数很简单:

function normalizeString(inputString) {
  return jQuery.fn.DataTable.ext.type.search.string(inputString);
}

对于表数据,处理取决于数据是作为对象

{...}
还是数组
[...]
提供。我将假设数组 - 但对象的迭代当然会有所不同:

function normalizeTableData( row ) {
    var normalizedData = '';
    row.forEach(function (item) {
      var new = normalizeString( item );
      if ( new !== item ) {
        normalizedData = normalizedData + ' ' + new;
      }
    });
    return normalizedData;
}

您可能需要增强上述迭代,具体取决于表中数据的类型(例如无法标准化的数字数据值)。


1
投票

我找到了一个解决方案,并且没有任何问题。

解决方案如下:

我称这个函数为:

https://jsfiddle.net/s39o8pdu/1/

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  'locale-compare-asc': function ( a, b ) {
     return a.localeCompare(b, 'cs', { sensitivity: 'case' })
  },
  'locale-compare-desc': function ( a, b ) {
     return b.localeCompare(a, 'cs', { sensitivity: 'case' })
  }
})

jQuery.fn.dataTable.ext.type.search['locale-compare'] = function (data) {
    return NeutralizeAccent(data);
}

function NeutralizeAccent(data)
{
  return !data
      ? ''
        : typeof data === 'string'
        ? data
        .replace(/\n/g, ' ')
        .replace(/[éÉěĚèêëÈÊË]/g, 'e')
        .replace(/[šŠ]/g, 's')
        .replace(/[čČçÇ]/g, 'c')
        .replace(/[řŘ]/g, 'r')
        .replace(/[žŽ]/g, 'z')
        .replace(/[ýÝ]/g, 'y')
        .replace(/[áÁâàÂÀ]/g, 'a')
        .replace(/[íÍîïÎİÏ]/g, 'i')
        .replace(/[ťŤ]/g, 't')
        .replace(/[ďĎ]/g, 'd')
        .replace(/[ňŇ]/g, 'n')
        .replace(/[óÓ]/g, 'o')
        .replace(/[úÚůŮ]/g, 'u')
        : data
}

var table = $('#example').DataTable({
    columnDefs : [
     { targets: 0, type: 'locale-compare' },
  ]
})

 $('#example_filter input').keyup(function () {
    table
    .search(
      jQuery.fn.dataTable.ext.type.search.string(NeutralizeAccent(this.value))
    )
    .draw()
 })
 

祝遇到这个问题的人好运。如果您有任何问题请问我。我现在知道如何解决这个问题了。

就像安德鲁詹姆斯在答案中所说,我们通过口音中和来解决这个问题。


0
投票

你可以尝试用这个代码来替换

   $("input[type='search']").keyup(function () {
            var charMap = {
                Ç: 'C',
                Ö: 'O',
                Ş: 'S',
                İ: 'I',
                I: 'i',
                Ü: 'U',
                Ğ: 'G',
                ç: 'c',
                ö: 'o',
                ş: 's',
                ı: 'i',
                ü: 'u',
                ğ: 'g'
            };

            var str = $("input[type='search']").val();
            str_array = str.split('');

            for (var i = 0, len = str_array.length; i < len; i++) {
                str_array[i] = charMap[str_array[i]] || str_array[i];
            }

            str = str_array.join('');

            var clearStr = str.replace(" ", "").replace("-", "").replace(/[^a-z0-9-.çöşüğı]/gi, "");


            $("input[type='search']").val(clearStr);

        });

0
投票

试试这个。即使在 Vue 3 中它也解决了这个问题。

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]; });};
© www.soinside.com 2019 - 2024. All rights reserved.