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 =...

中添加对这些列表或按钮的引用

因为它只引用单元格的文本而不引用按钮或列表。

感谢您的帮助。

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/

使用Datatable插件搜索不带重音符号

1 个答案: