Datatables filter忽略html数据中的特殊字符

Question

我在初始化Datatables搜索筛选器时忽略特殊字符时遇到了一些麻烦。我正在使用数据表中的技术 accent neutralise plugin.

它适用于字符串数据，但不适用于表格中的html数据。我的测试用例使用名称变体字母ü（带或不带变音符号）... u，ü，U，Ü我希望过滤器显示名称为“tuv”的结果，不管大写字母还是你的变音。

STRING例如：
搜索“TUV”找到所有的情况下，无论口音......但“名称”列排序功能不正常。
http://jsfiddle.net/lbriquet/hdq8bLqn/

HTML例如：
搜索 “TUV” 发现非重音的比赛..但 “名称” 列排序功能正常。 http://jsfiddle.net/lbriquet/cj2s501L/

这里是初始化代码：

jQuery.fn.dataTable.ext.type.search.string = function(data) { 
    return !data ? 
    '' : 
    typeof data === 'string' ? 
    data 
    .replace(/έ/g, 'ε') 
    .replace(/ύ/g, 'υ') 
    .replace(/ό/g, 'ο') 
    .replace(/ώ/g, 'ω') 
    .replace(/ά/g, 'α') 
    .replace(/ί/g, 'ι') 
    .replace(/ή/g, 'η') 
    .replace(/\n/g, ' ') 
    .replace(/[áÁ]/g, 'a') 
    .replace(/[éÉ]/g, 'e') 
    .replace(/[íÍ]/g, 'i') 
    .replace(/[óÓ]/g, 'o') 
    .replace(/[úÚ]/g, 'u') 
    .replace(/[üÜ]/g, 'u') 
    .replace(/ê/g, 'e') 
    .replace(/î/g, 'i') 
    .replace(/ô/g, 'o') 
    .replace(/è/g, 'e') 
    .replace(/ï/g, 'i') 
    .replace(/ã/g, 'a') 
    .replace(/õ/g, 'o') 
    .replace(/ç/g, 'c') 
    .replace(/ì/g, 'i') : 
    data; 
}; 

$(document).ready(function() { 
    var oTable = $('#example').DataTable(); 
    // Remove accented character from search input as well 
    $('#example_filter input').keyup(function() { 
    oTable 
     .search(
     jQuery.fn.dataTable.ext.type.search.string(this.value) 
    ) 
     .draw(); 
    }); 
}); 

我觉得strip html plugin可以适用于解决这个问题。我的工作是替换一个特殊字符，但我需要能够替换几个。列排序也适用于此方法。

https://jsfiddle.net/lbriquet/ueo8x7up/

(function() { 
var _div = document.createElement('div'); 
jQuery.fn.dataTable.ext.type.search.html = function(data) { 
    _div.innerHTML = data; 
    return _div.textContent ? 
    _div.textContent.replace(/[üÜ]/g, 'u') : 
    _div.innerText.replace(/[üÜ]/g, 'u'); 
}; 
})(); 

$(document).ready(function() { 
    var oTable = $('#example').DataTable({ 
    "columnDefs": [{ 
     "type": "html", 
     "targets": '_all' 
    }] 
    }); 
}); 

谁能给我个忙？

Answer 1

我找到了解决方案，通过修改Datatables strip html plugin来替换html中特殊字符链。

jQuery.fn.dataTable.ext.type.search。 html方法解决了当表包含无法使用jQuery.fn.dataTable.ext.type.search解析的html数据时所面临的问题。 字符串在Datatables accent neutralise plugin中使用的方法。

https://jsfiddle.net/lbriquet/xjzuahrt/1/

(function() { 
    var _div = document.createElement('div'); 
    jQuery.fn.dataTable.ext.type.search.html = function(data) { 
    _div.innerHTML = data; 
    return _div.textContent ? 
     _div.textContent 
     .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a') 
     .replace(/[çÇ]/g, 'c') 
     .replace(/[éÉèÈêÊëË]/g, 'e') 
     .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i') 
     .replace(/[ñÑ]/g, 'n') 
     .replace(/[óÓòÒôÔöÖœŒ]/g, 'o') 
     .replace(/[ß]/g, 's') 
     .replace(/[úÚùÙûÛüÜ]/g, 'u') 
     .replace(/[ýÝŷŶŸÿ]/g, 'n') : 
     _div.innerText 
     .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a') 
     .replace(/[çÇ]/g, 'c') 
     .replace(/[éÉèÈêÊëË]/g, 'e') 
     .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i') 
     .replace(/[ñÑ]/g, 'n') 
     .replace(/[óÓòÒôÔöÖœŒ]/g, 'o') 
     .replace(/[ß]/g, 's') 
     .replace(/[úÚùÙûÛüÜ]/g, 'u') 
     .replace(/[ýÝŷŶŸÿ]/g, 'n'); 
    }; 
})(); 

$(document).ready(function() { 
    var oTable = $('#example').DataTable({ 
    "columnDefs": [{ 
     "type": "html", 
     "targets": '_all' 
    }] 
    }); 
// Remove accented character from search input as well 
    $('#example_filter input[type=search]').keyup(function() { 
     var table = $('#example').DataTable(); 
     table.search(
      jQuery.fn.DataTable.ext.type.search.html(this.value) 
     ).draw(); 
    }); 
});