Search code examples
datatablesyadcf

How can I combine a dt-render function with yadcf-filter_match_mode: 'exact' and a separator?

I've been trying and searching for a long time now, but can't find a solution.

The field value is separated by a separator. To display it nicely, I replace it with a comma. However, the filter behavior is not as expected and I have the impression that the options of column 5 are also applied to column 3.

https://jsbin.com/valeces/4/edit?html,output

If I remove the options for column 5, the search result in column 3 is different:

```https://jsbin.com/dagulix/2/edit?html,output```

If “XXX” is selected for the first filter, only one result is found, although the value exists twice. With the second jsbin, the result is different although the options for column 3 are the same.

filter_match_mode: I couldn't get exact to work, so I used contains for the beginning.

Solution

  • Change the DataTables render function for VERTRAGSART from this:

    {
    "data": "VERTRAGSART",
    render: function(data, type, row) {
      return data.split("|").join(", ");
   }
},

    ...to this:

    {
    "data": "VERTRAGSART",
    render: function(data, type, row) {
      if(type === 'display') {
        return data.split("|").join(", ");
      } else {
        return data;
      }                        
   }
},

    Why?

    The problem is that you are mixing two different formats:

    1. The drop-down list is based on how you process the raw JSON data using |.

    2. The search is performed against the modified data in your DataTable, which uses , when a filter is performed.

    The two formats do not match.

    The solution takes this into account by allowing DataTables to store different data formats for your VERTRAGSART data:

    a) a "display" type format, where the user sees the more friendly , instead of the original |.

    b) the original format (using |), used by all the other types used by DataTables - namely "filter" type and "sort" type.

    The user is shown the "display" type format.

    But DataTables stores the other format for its "filter" type and "sort" type. And then when a filter (or sort) is performed by the user, DataTables uses that other formatted string - the one with the | in it.

    And, in your case, that string will now match the original JSON data you used when you built your drop-down values with yadcf.

    Unless you explicitly handle these different "types" in the render function, then DataTables uses the provided data for all types (display, filter and sort).

    You can read more about this here: Orthogonal Data. This also describes additional ways you can handle these "orthogonal" data types.

    If you prefer, you may want to do this:

    {
    "data": "VERTRAGSART",
    render: function(data, type, row) {
      if(type === 'filter') {
        return data;
      } else {
        return data.split("|").join(", ");
      }                        
   }
},

    Now, only the "filter" type will use the string formatted with | - and the other types ("display" and "sort") will use your , formatted string.

    You may also want to repeat this code change for any other columns also containing | separators.

    A runnable Stack Snippet demo using your original code:

    $(document).ready(function() {



  var data = {
    "actualRows": 46,
    "filteredRows": 46,
    "myRows": [{
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH",
      "VERTRAGSART": "Dienstleistungsvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Vertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "XXX"
    }, {
      "BETREFF": "thomas mag pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "XXX|Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag,1|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "thomas:: mag: pizza",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-05-25T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "Pizza Party",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2099-12-31T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "Pizza Party",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2099-12-31T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "Pizza Party",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2099-12-31T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "Pizza Party thomas mag pizza thomas mag pizza thom thomas mag pizza thomas mag pizza thom",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-06-08T00:00:00",
      "STATUSVERTRAG": null,
      "VERTRAGSPARTNER": "Andreas Kreuz GmbH|xxy",
      "VERTRAGSART": "Dienstleistungsvertrag|Rahmenvertrag"
    }, {
      "BETREFF": "test statustest statustest statustest statustest statustest statustest statustest statustest statust",
      "VERANTWORTLICHESTELLE": "Unternehmesentwicklung",
      "VERTRAGSENDE": "2024-06-06T00:00:00",
      "STATUSVERTRAG": "g\u00fcltig",
      "VERTRAGSPARTNER": "xxy",
      "VERTRAGSART": "Dienstleistungsvertrag"
    }],
    "sourceID": 381643197,
    "success": true,
    "totalRows": 46,
    "totalSourceRows": 46
  }


  var oTable = $('#myTable').DataTable({
    "data": data.myRows,
    "processing": true,
    "columns": [{
      "data": "BETREFF"
    }, {
      "data": "VERANTWORTLICHESTELLE"
    }, {
      "data": "VERTRAGSPARTNER",
      "render": function(data, type, row) {
        return data.split("|").join(", ");
      }
    }, {
      "data": "VERTRAGSART",
      render: function(data, type, row) {
        if (type === 'display') {
          return data.split("|").join(", ");
        } else {
          return data;
        }

      }
    }, {
      "data": "VERTRAGSENDE",
      "render": DataTable.render.datetime('DD.MM.YYYY')
    }, {
      "data": "STATUSVERTRAG"
    }],
  });

  yadcf.init(oTable, [{
    column_number: 3,
    filter_type: "select",
    text_data_delimiter: "|",
    filter_container_id: "s_vertragsart",
    filter_reset_button_text: false,
    style_class: "form-control",
    filter_match_mode: "contains"
  }, {
    column_number: 5,
    filter_type: "text",
    filter_container_id: "s_status",
    filter_reset_button_text: false,
    filter_match_mode: "exact",
    style_class: "form-control"
  }]);
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DT</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <!--<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">-->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.11/css/dataTables.dataTables.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
  <!--
<script type="text/javascript" src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<script type="text/javascript" src="https://raw.githack.com/vedmack/yadcf/master/2.0/jquery.dataTables.yadcf-2.0.js"></script>
  -->
  <script type="text/javascript" src="https://cdn.datatables.net/1.13.11/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://raw.githack.com/vedmack/yadcf/master/dist/jquery.dataTables.yadcf.js"></script>

</head>

<body>
  <div class="container-fluid mt-3">
    <div class="row mb-2">
      <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 fw-bold">Vertragsart
        <div id="s_vertragsart"></div>
      </div>
      <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 fw-bold">Status
        <div id="s_status"></div>
      </div>
    </div>
    <table class="table table-hover align-middle" id="myTable" width="100%">
      <thead>
        <tr>
          <th scope="col">Betreff</th>
          <th scope="col">Verantwortliche Stelle</th>
          <th scope="col">Vertragspartner</th>
          <th scope="col">Vertragsart</th>
          <th scope="col">Gültig bis</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
    </table>
  </div>

</body>

</html>

    Searching for XXX in Vertragsart now finds 2 records.