I have a simple html div <div id="data_table"></div> and I try to load its content from a csv. I build the table succesfully and see it rendered. Hovewer, I want to add a TableFilter, but it seems the element does not exist in DOM.

I get:

Uncaught Error: Could not instantiate TableFilter: HTML table DOM element not found.

<script>
   $(document).ready(function () {
        $.ajax({
          url: "static/data.csv",
          dataType: "text",
          success: function (data) {
            var employee_data = data.split(/\r?\n|\r/);
            var table_data = '<table class="table table-bordered table-striped">';
            for (var count = 0; count < employee_data.length; count++) {
              var cell_data = employee_data[count].split(",");
              table_data += "<tr>";
              for (var cell_count = 0;cell_count < cell_data.length;cell_count++){
                if (count === 0) {
                  table_data += "<th>" + cell_data[cell_count] + "</th>";
                }else {
                  table_data += "<td>" + cell_data[cell_count] + "</td>";
                }
              }
              table_data += "</tr>";
            }
            table_data += "</table>";
            $("#data_table").html(table_data);
          },
        });
        
        var tf = new TableFilter("data_table", {
          base_path: "static/tablefilter/",
          alternate_rows: true,
        });
        tf.init();

      });
</script>