Answers

• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020

  Formatted demo http://live.datatables.net/havusebu/2/watch
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020

  UPDATE: In my HTML I have used data- attributes for filtering records which is causing the issue. But why will data-search attribute cause this issue? By removing the below data-search attributes search filter is working. But when data-search= is present in the HTML it's not working.

  <td data-search="blog">
• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2020

  This is due to orthogonal data.

  <td data-search="blog">
  

  results in the string blog being returned whenever a search occurs, and not the string in the cell itself.

  Colin
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020

  Hi @colin ,

  Yes I know that it's due to <td data-search="blog"> but how can I make it working?

  I want the filters and search filter also. By search filter I mean when user types a keyword in search box.

  Best regards
• kthorngren Posts: 21,922Questions: 26Answers: 5,067

  February 2020

  What is your goal with this?

  data-search="blog"

  Maybe you need two columns. One for the regular search and one with data-search="blog". One of the columns can be hidden with `-option columns.visible.

  Kevin
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020

  @kthorngren I do filtering by data-search attribute please see the attach
• kthorngren Posts: 21,922Questions: 26Answers: 5,067

  February 2020

  My suggestion is to have a hidden column with a flag indicating if the row is a blog or not. You can use columns.render to look at the row data to determine if its a blog.

  Kevin
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020 edited February 2020

  @kthorngren this is how currently filtering is working:

  HTML:

  <div class="es-filters">
      <strong>Filter by:</strong>
      <input onchange="filterByType()" type="checkbox" name="type" value="blog|quiz|story|recipe|resource">All
      <input onchange="filterByType()" type="checkbox" name="type" value="blog">Blogs
      <input onchange="filterByType()" type="checkbox" name="type" value="quiz">Quiz
      <input onchange="filterByType()" type="checkbox" name="type" value="story">Stories
      <input onchange="filterByType()" type="checkbox" name="type" value="recipe">Recipes
      <input onchange="filterByType()" type="checkbox" name="type" value="resource">Resources
  </div>
  <hr>
  <table id="cx-elastic-search-results-table" class="container cx-elastic-search-container">
      <thead>
      <tr>
          <th></th>
      </tr>
      </thead>
      <tbody>
      {% for hit in searchResults['hits'] %}
      <tr>
          <td data-search="{{ hit['_source']['filter'] }}">
              <div class="row elastic-search-record">
                  <div class="col-xs-8 col-xs-offset-2">
                      <a href="{{ hit['_source']['slug'] }}"><h3>{{ hit['_source']['title'] }}</h3></a>
                      <div class="cx-elastic-search-anchor-text">
                          {{ rtrim(CxHelper.Route('ebfront-home'), '/') }}{{ hit['_source']['slug'] }}
                      </div>
                      <div class="cx-elastic-search-description">
                          {% if hit['_source']['content'] %}
                              <?php $content = strlen($hit['_source']['content']) > 150 ? substr($hit['_source']['content'], 0, 150)."..." : $hit['_source']['content']; ?>
                              {{ content }}
                          {% else %}
                              {{ hit['_source']['title'] }}
                          {% endif %}
                      </div>
                  </div>
              </div>
          </td>
      </tr>
      {% endfor %}
      </tbody>
      <tfoot>
  
      </tfoot>
  </table>
  

  // Filter Elastic Search results DataTable by Type
          function filterByType() {
              //build a regex filter string with an or(|) condition
              let types = $('input:checkbox[name="type"]:checked').map(function() {
                  return '^' + this.value + '\$';
              }).get().join('|');
              //filter in column 0, with an regex, no smart filtering, no input box, not case sensitive
              ElasticDataTable.fnFilter(types, 0, true, false, true, false);
          }
  

  Let say If I changed <td data-search="{{ hit['_source']['filter'] }}"> to <td data-searchFilter="{{ hit['_source']['filter'] }}">

  So how can I bind search filter with this then?
• allan Posts: 64,324Questions: 1Answers: 10,622 Site admin

  February 2020

  Hi,

  I'm not quite clear on what it is you are looking to do I'm afraid, so I'm not sure how to resolve it. If you have data-search attributes for td elements, DataTables will use their value as the search string.

  I'm presuming that is not what you want.

  Do you want DataTables just to search the content of the cell? If so, change data-search to data-searchFilter as you say, and it will just use the content of the cell.

  Allan
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020

  Do you want DataTables just to search the content of the cell? If so, change data-search to data-searchFilter as you say, and it will just use the content of the cell.

  Yes I want to search the content when some type a keyword in search input.

  But I also want the checkbox filters to be working. e.g if someone check Blogs checkbox it should just show the blogs records from the result. And these filters works on data-search now. So if I remove/rename data-search to something else then this filtering functionality will be broken.

  Best regards
• kthorngren Posts: 21,922Questions: 26Answers: 5,067

  February 2020

  Sounds like using the HTML5 data attribute for searching isn't going to work for your case. Here are a couple examples of using checkboxes for searching.

  Uses a function:
  http://live.datatables.net/vipifute/1/edit

  Uses a Search Plugin:
  http://live.datatables.net/wenaxuti/1/edit

  Maybe one of these will help you adapt your checkbox search.

  Kevin
• iftikharuddin Posts: 18Questions: 5Answers: 0

  February 2020 edited February 2020

  Hi @kthorngren @allan @colin ,

  Thanks for the help guys.

  I just added an extra hidden td <td style="display:none;" data-search="{{ hit['_source']['filter'] }}"></td> and removed data-search from the below td

  <td data-search="{{ hit['_source']['filter'] }}">
  

  and now both filter and search is working

  Thanks a lot guys.

  Code LIVE Update: http://live.datatables.net/jitaguce/1/watch

  Best regards