title: Datatables - Search on data-attribute only
body: <p>I searched the web and this website for the proper info and there are many of them discussing the data-search but they are very specific and don't cover the basics I need. They didn't help me find a resolution to my problem.</p>
  
  <p>I have a datatable with a custom search input</p>
  
  <p>This input has an event attached to it to connect it to the datatable, and it works fine:</p>
  
  <pre><code>$('.search').keyup (function(){
      dataTable.search(this.value).draw();
  });
  </code></pre>
  
  <p>On <strong>each and every tbody td</strong> of my table (even the empty ones), I added a "data-search" attribute with the value I want the search to be exclusively made on.</p>
  
  <p>Here is a console screenshot that shows that fact:</p>
  
  <p><a href="https://i.stack.imgur.com/tg0rD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tg0rD.png" alt="enter image description here"></a></p>
  
  <p>But it doesn't work as the search is still made by default based on the td's html content.</p>
  
  <p>I know for sure because here is an example: in one of my td's I have something like "<strong>2 m<sup>2</sup></strong>" (the power is rendered with a 'sup' tag inside the cell) while in its data-search, I have a plain text "<strong>2 m2</strong>". </p>
  
  <p>So if I type in the search box "<strong>2 m</strong>", I have a match but if I type "<strong>2 m2</strong>", there is no match anymore. So, it seems quite clear that the data-search attribute doesn't do much.</p>
  
  <p>Here is my default datable configuration:</p>
  
  <pre><code>dataTable = $('.table_x').DataTable({
      'bInfo'     : false,
      'paging'    : false,
      'scrollX'   : false,
      'processing': false,
      'sDom'      : 'ltipr',
      'order'     : [[0,"asc"]],
      'colReorder': {realtime:true},
      'data'      : dataSet,    //ajax import
      'columns'   : dataColumns //ajax import
  });
  </code></pre>
  
  <p>Should I need to add something to it in order to cancel the default search and target the data-search attribute instead? </p>
  
  <p>I read this page of the Jquery datatables documentation but it doesn't seem to say there should be anything added, so I'm stuck:
  <a href="https://datatables.net/examples/advanced_init/html5-data-attributes.html" rel="nofollow noreferrer">https://datatables.net/examples/advanced_init/html5-data-attributes.html</a></p>
  
  <p>Thank you very much for your help.</p>
  
  <p>EDIT: here is how I dynamically feed my "dataColumns" variable here above:</p>
  
  <pre><code>// The columns are selected dynamically according to the user's preferences
  
  function getTableData(){
      $.ajax({
          type    : 'GET',
          url     : 'get_table_data.php',
          data    : '...',
          datatype: 'json',
          async   : false,
          cache   : false
      })
      .done (function(response){
          dataSet = JSON.parse(response);
          $.each(dataSet[0], function(key, value)
          {   
              var my_item = {};
                  my_item.data = key ;
                  my_item.title = key ;
                  dataColumns.push(my_item);
          }); 
      })    
  }
  </code></pre>
  
  <p>EDIT 2: This is <strong>exactly</strong> what I added according to the help I got but it still doesn't work:</p>
  
  <pre><code>dataTable = $('.table_x').DataTable({
      'bInfo'     : false,
      'paging'    : false,
      'scrollX'   : false,
      'processing': false,
      'sDom'      : 'ltipr',
      'order'     : [[0,"asc"]],
      'colReorder': {realtime:true},
      'data'      : dataSet,    //ajax import
      'columns'   : dataColumns //ajax import
  });
  
  $.fn.DataTable.ext.search.push((settings, row, index, rowData) =&gt; [...$(dataTable.row(index).node()).find('td')].map(td =&gt; $(td).attr('data-search')).some(tdAttr =&gt; tdAttr.includes($('#search').val().toLowerCase())))
  </code></pre>
  
  <p>With this: no error thrown but If I type "<strong>2 m</strong>", no match is met at all while both the data-search AND the td cell starts with "<strong>2 m</strong>".</p>