使用Datatable插件搜索无需口音

Question

我正在使用Datatable插件来搜索表。 另外，为了能够搜索包含重音的单词而不必指出重音，我添加了以下代码，以删除单词中的所有重音：

 jQuery.fn.DataTable.ext.type.search.string = function ( data ) {

return ! data ?
    '' :
    typeof data === 'string' ?
        data
            .replace( /\n/g, ' ' )
            .replace( /[áâàä]/g, 'a' )
            .replace( /[éêèë]/g, 'e' )
            .replace( /[íîìï]/g, 'i' )
            .replace( /[óôòö]/g, 'o' )
            .replace( /[úûùü]/g, 'u' )
            .replace( /ç/g, 'c' ) :
        data;
};

这对于表中的任何搜索均正确。 但是现在我需要能够在单元格内容为列表或按钮的另一个表中执行相同的操作，因为我需要能够使用可排序的jquery-ui将表元素拖到另一个列表中。

也就是说，我具有以下结构：

<table class="scrollTable dataTable" role="grid" aria-describedby="info">
 <thead class="fixedHeader">
  ...
 </thead>
 <tbody class="scrollContent">
   <tr role="row">
     <td class="sorting_1">
       <button >Peter</button>
     </td>
   </tr>
  ...
 </tbody>
</table>

要么

<table class="scrollTable dataTable" role="grid" aria-describedby="info">
 <thead class="fixedHeader">
  ...
 </thead>
 <tbody class="scrollContent">
   <tr role="row">
     <td class="sorting_1">
       <ul>
       <li>Peter</li>
       </ul>
     </td>
   </tr>
  ...
 </tbody>
</table>

而且我需要能够使用重音并使用上面指示的代码来转换单词，但要在jQuery.fn.DataTable.ext.type.search.string =...添加对这些列表或按钮的引用jQuery.fn.DataTable.ext.type.search.string =...

由于它仅引用单元格的文本，而不引用按钮或列表。

我感谢您的帮助。

Answer 1

以下代码将使用非重音等效项在列中搜索重音字符。 它还支持搜索html内容的内部文本。

它通过设置新的列类型以支持搜索html文本以及“规范化”它可能具有的任何重音字符来工作。 我称这种新列类型为html-string 。 您只需要将此特定列类型应用于包含html的列。 其他列会在搜索过程中自动将其重音“规范化”：

// set up a custom column type to strip html tags and normalise the characters for searching
$.fn.dataTableExt.ofnSearch['html-string'] = function(sData) {

  // strip html tags (you will need to test this regex for your needs. Source from http://stackoverflow.com/a/25885923/1544886)
  sData = sData.replace(/(&nbsp;|<([^>]+)>)/ig, "");

  // apply character normaliser to this column type
  return jQuery.fn.DataTable.ext.type.search.string(sData);
}

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, 'e')
    .replace(/î/g, 'i')
    .replace(/ô/g, 'o')
    .replace(/è/g, 'e')
    .replace(/ï/g, 'i')
    .replace(/ü/g, 'u')
    .replace(/ã/g, 'a')
    .replace(/õ/g, 'o')
    .replace(/ç/g, 'c')
    .replace(/ì/g, 'i') :
    data;
};

然后将新类型应用于相应的列：

var table = $('#example').DataTable({
  "columnDefs": [{
     "type": "html-string",
     "targets": [2]
  }]
});

如代码中所述，您应该测试我选择的html-stripping正则表达式。 它为我的例子工作。

演示https://jsfiddle.net/4gdea71p/2/