Question about Multiple Filter Example

ikhvjs

I follow the example here https://datatables.net/examples/api/multi_filter.html

I can repeat this case.

However, I have question about this example.

The original code:

var table = $("#example").DataTable({
  initComplete: function () {
    // Apply the search
    this.api()
      .columns()
      .every(function () {
        var that = this;

        $("input", this.footer()).on("keyup change clear", function () {
          if (that.search() !== this.value) {
            that.search(this.value).draw();
          }
        });
      });
  },
});

I replace this.footer() to below but it doesn't work.

var table = $("#example").DataTable({
  initComplete: function () {
    // Apply the search
    this.api()
      .columns()
      .every(function () {
        var that = this;
        const footer = $(this).closest("table").find("tfoot");
        $("input", footer).on("keyup change clear", function () {
          if (that.search() !== this.value) {
            that.search(this.value).draw();
          }
        });
      });
  },
});

May I know why the codes I change doesn't work at all? Thanks.

tangerine

Does your HTML have a tfoot?

ikhvjs

Yes. I follow the example and only change the codes for this.footer()

kthorngren

In the first code snippet this.footer() is the column().footer() API, where this is the column. This API returns the relevant th in that column's footer.

Why do you want to change this.footer() to something else? If you need help with the change you are making please provide a test case so we can take a look at what is happening.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ikhvjs

Hi Kevin,

I want to understand why I use Jquery to select the footer and pass it to the event handler doesn't work. I want to create some other filtering field not just in the footer but in some other place.

Example: https://jsbin.com/hewacid/edit?html,js,output

kthorngren

The selector you are using is not specific enough. I updated your example to show this:
https://jsbin.com/sawonunuve/1/edit?html,js,output

It displays the column index being searched when typing into one of the inputs. You will see it tries searching all the columns.

You can use the jQuery :eq selector to select the specific footer th for the column using the column's index, ie, var index = this.index();. See this example:
https://jsbin.com/wihogopupa/1/edit?html,js,output

If you want the inputs somewhere else then you will need to use a selector that finds the appropriate input.

Kevin

ikhvjs

Hi Kevin,
Well-explained! Thanks a lot.