CODEWITHSUNDEEP
javascriptjquerydatatable
Joseph
Joseph

Reputation: 859

Search without Accents Using Datatable plugin

I am using the Datatable plugin to be able to search the tables. Also, to be able to search for words that contain accents without having to indicate the accents I added the following code that removes all the accents to the words:

 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;
};

This works correctly for any search in the table. But now I need to be able to do the same in another table whose cells contents are a list or a button, since I need to be able to drag the table element to another list using sortable jquery-ui.

That is, I have the following structure:

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

Or

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

And I need to be able to transform the words with accents and using the code I indicated above but adding some reference to those lists or buttons in jQuery.fn.DataTable.ext.type.search.string =...

Since it only refers to the text of a cell and not to a button or list.

I appreciate your help.

Upvotes: 1

Views: 1586

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

The following code will search columns for accented characters using the non-accented equivalent. It also supports searching the inner text of html content.

It works by setting up new a column type to support searching the text of the html, as well as 'normalising' any accented characters it may have. I have called this new column type html-string. You only need apply this particular column type to columns that contain html. Other columns will automatically have their accents 'normalised' during search:

// 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;
};

Then apply the new type to the appropriate columns:

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

As noted in the code, you should test the html-stripping regex I chose. It worked for my example.

Demo https://jsfiddle.net/4gdea71p/2/

Upvotes: 2

Related Questions