Is it possible to make search filter items in tag

anivaries

I have this one table with two columns but get data from same queryset. in HTML i have

 <table data-page-length='15' id="table" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th class="text-start erlorefont col-6" style="color:orange">{{ title.0 }}</th>
                        <th></th>
                    </tr>
                </thead>
                {% if lore_list|length <= 29 %}
                <tbody>
                        {% for lower_item, greater_item in fewer_than_29 %}
                        <tr>
                            <td class="erlorefont "><a style="text-decoration:none;" href="{% url 'lores:loreitems' lower_item.id %}">{{lower_item}}</a></td>
                            {% if greater_item %}
                            <td class="erlorefont "><a style="text-decoration:none;" href="{% url 'lores:loreitems' greater_item.id %}">{{greater_item}}</a></td>
                            {% else %}
                            <td></td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                </tbody>
                {% endif %}
</table>

And it looks like this

Now, when i try to search for a certain object it returns whole row where there are hits

This is js for dataTable

$(document).ready(function () {
  $('#table').dataTable({
    "dom": 't' + "<'row'<'col-sm-12 col-md-5'f><'col-sm-12 col-md-7'p>>",
    "autoWidth": true,
    "regex": true,
    "responsive": true,
    "info": false,
    "searching": true,
    "lengthChange": false,
    "stripeClasses": [],
    "ordering": false,
    "fnDrawCallback": function (oSettings) {
      if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
        $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
      } else {
        $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
      }
    },
  })
})
  ;

So my question is: Is it possible to show only one item which matches, and not a whole row, when there are matching strings in search bar?

kthorngren

Maybe, see this example:
https://live.datatables.net/cojizewa/1/edit

It may not behave the way you want.

It uses the search to see if there are matches, to the search term, in either column. If no matches then it hides the column otherwise it makes the column visible.

It uses filter() to find an data the matches the string in the column. It uses selector-modifier of {search: "applied"} to limit the rows it loops through. column().visible() is used to show/hide the column.

The filter() function uses:

return value.toLowerCase().includes(searchTerm.toLowerCase())  ? true : false;

To loosely mimic smart searching as described in the search() docs. You can change the conditional to meet your requirements.

Kevin

anivaries

Yes, that's it! Looks good and it does what i wanted! Will have to swop from dataTable, in my code, to DataTable though because lowercase throws an error. Gonna play around a bit to see what else this search can do.

Thank you again Kevin, really helping me these past few days