jQuery datatable.js土耳其字符搜索问题

如何解决jQuery datatable.js土耳其字符搜索问题

我有一个jQuery datatablejs。我列出了项目。我想搜索一些东西。但是当我输入İ时,它只能找到İ字符。 我也想查找字符。像I-ıÜ-ü。

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

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

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

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

解决方法

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

,

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

Diacritics Neutralize

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

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

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

概述

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

  2. 添加定制的搜索功能,该功能对用户输入的搜索词执行相同的标准化过程。

这意味着用户可以对iIİ进行任何搜索-它将成功找到包含这些字符中任何一个的任何行。

这里的关键部分是我们将完全相同的规范化过程应用于表数据和搜索数据。

处理表格数据

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

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

这要求您具有与我们将使用的“ diacritics-neutralize”功能所提供的功能相同的服务器端功能。如果不是这样,您可能更喜欢使用一个函数来处理表本身中的数据:

"columnDefs": [
  {
    "targets": [ -1 ],"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;
}

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

,

您可以尝试用以下代码替换

   $("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);

        });
,

我找到了解决方案,并且可以正常工作。

这是解决方案:

我称这个功能为

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,{ 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()
 })
 

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

就像安德鲁·詹姆斯(Andrewjames)所说,我们通过口音中和解决了这个问题。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-