Is it possible to make search filter items in tag

Is it possible to make search filter items in tag

anivariesanivaries Posts: 5Questions: 2Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,686
    Answer ✓

    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

  • anivariesanivaries Posts: 5Questions: 2Answers: 0
    edited March 2023

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

Sign In or Register to comment.