Individual column searching without href value

bananablues

Hi,

My table HTML:

<table class="my-table">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="01.html">Product 1</a>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <a href="02.html">Product 1</a>
      </td>
      <td>...</td>
    </tr>
  </tbody>
</table>

...and my DataTables Init with a custom select filtering the first row:

$(".my-table").DataTable({
  initComplete: function () {
    this.api()
      .columns([0])
      .every(function () {
        var column = this;
        $('<label for="product">Product</label>').appendTo(".my-custom-filter");
        var select = $(
          '<select id="product"><option value="">all</option></select>'
        )
          .appendTo(".my-custom-filter")
          .on("change", function () {
            var val = $.fn.dataTable.util.escapeRegex($(this).val());
            column.search(val ? "^" + val + "$" : "", true, false).draw();
          });
      });
  },
});

It shows now in the custom select, cause of the different href values:
* Product 1
* Product 1

My goal is, that the custom select filter shows "Product 1" only one time.

My question is, how can i exclude the href value for filtering the first column. Only text should be filtered.

Thanks for your help.

Sascha

bananablues

Me again ,

The DataTables Init in my first post was not complete, sorry.

See the example in Codepen: https://codepen.io/bananablues/pen/eb0b28295f73557ebaf737bdc2f0819e

Thanks
Sascha

kthorngren

The column().data() is the a tag, for example: <a href="01.html">Product 1</a>. I would create an empty array before the loop that is used to keep track of the html values var d = $("<td/>").html(d).text(); and if it exists in the array then don't append to the select list. Something like this:

        var mySelects = [];

        column
          .data()
          .unique()
          .sort()
          .each(function (d, j) {
            var d = $("<td/>").html(d).text();
            if ( ! mySelects.includes(d) ) {
              mySelects.push( d );
              if (column.search() === "^" + d + "$") {
                select.append(
                  '<option value="' +
                    d +
                    '" selected="selected">' +
                    d +
                    "</option>"
                );
              } else {
                select.append('<option value="' + d + '">' + d + "</option>");
              }
            }
          });

Didn't test it but it should be close.

Kevin

bananablues

Great, that works!

Thanks a lot!

Sascha