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

因爲它只涉及單元格的文本而不是按鈕或列表。

我感謝您的幫助。

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剝離我選擇的正則表達式。它適用於我的例子。

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