How to "filter" table data by value?

How to "filter" table data by value?

sjordansjordan Posts: 36Questions: 10Answers: 0
edited September 22 in DataTables 1.10

How can I "filter" table data?

Here is my test case.

This is a simple, contrived example to illustrate the point. Using the select box at the top of the page, I want to "filter" for either families with the name of Smith or not.

In my test case, like the post here on the forum, I have impleted filtering with the search api.

However, on two points, this is not the UX my users are expecting:

  1. Using the search API causes the value of the select to appear in the search box (see image below).

  2. When users say filter, they mean it is the Excel use of the word. For example, when you apply a filter to an Excel column.

Also, using my example, searching for values such that val == 'Smith' is easy. What is the implementation for val !== 'Smith'?

What is the recommended approach?

Thank you in advance

Answers

  • kthorngrenkthorngren Posts: 21,332Questions: 26Answers: 4,951

    Use column().search()instead of search(). This way the default search input is not populated with the search term. If you want to perfrom a not compare then create a function, that is passed as the first parameter, input, to the column().search() API. The function can perform any comparison's you want.

    Kevin

  • kthorngrenkthorngren Posts: 21,332Questions: 26Answers: 4,951

    Another option is to use column().search.fixed(). See this thread.

    Kevin

  • sjordansjordan Posts: 36Questions: 10Answers: 0
    edited September 22

    Here's my updated filter:

    $("#mySelect").on("change", function () {
              const option = $(this).val();
    
              table
                .columns(1)
                .search((d) => {
                  if (option === "Smith") {
                    return d.includes("smith");
                  } else if (option === "NotSmith") {
                    return !d.includes("smith");
                  }
                  return true;
                })
                .draw();
            });
    

    Doesn't work. Is my syntax correct?

    Also note, I'm using DT1

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    DataTables v1 does not support passing a function to the search() methods. You need DataTables 2 for that. Also, DataTables 1 is no longer supported, so if you can, I'd suggest updating.

    Allan

  • sjordansjordan Posts: 36Questions: 10Answers: 0

    Any work around for DT1?

  • kthorngrenkthorngren Posts: 21,332Questions: 26Answers: 4,951

    Create a search plugin. Here is a running example.

    Kevin

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    That example actually uses search.fixed() with a function search term now - it was updated for DataTables 2.

    It did use to use the old style $.fn.dataTable.ext.search.push(...) search functions, which is how it used to be done in DataTables 1. The code for that example is still in Github and you could base your solution off that if you can't upgrade. However, as I say, DT1 is no longer supported.

    Allan

  • sjordansjordan Posts: 36Questions: 10Answers: 0

    Thank you Kevin and Allan. I did manage to get workaround.

    Upgrading to DT2 is desired. Client uses maybe a half dozen instances of DT and Editor across the app; I'd have to do a bit of testing for breaking changes.

    Appreciate your help

Sign In or Register to comment.