Individual column searching without href value

Individual column searching without href value

bananabluesbananablues Posts: 3Questions: 1Answers: 0

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

Answers

  • bananabluesbananablues Posts: 3Questions: 1Answers: 0

    Me again :smile:,

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

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

    Thanks
    Sascha

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • bananabluesbananablues Posts: 3Questions: 1Answers: 0

    Great, that works!

    Thanks a lot!

    Sascha

This discussion has been closed.