使用数据表jquery进行烧瓶表搜索

我正在开发一个flask应用程序,它处理数据并生成一个pandas数据框,然后我将其显示在一个HTML页面上,在该页面上应用如下条件格式,

    <div style="margin-top:1%;margin-left:6%;margin-right:6%;max-height: 500px,max-width: 150px">
    <table id="myTable" class="table table-fixed">
        <thead>
            <tr>
                {% for header in headers %}<th>{{ header }}&nbsp</th>{% endfor %}
                </tr>
        </thead>
        {% for i in data_index_len %}
            <tr>
                {% for j in headers %}
                    {% if j in SLA_Status %}
                        {% if  math.isnan(data.ix[i,j]) %}
                            <td><b>{{ data.ix[i,j] }}</b></td>
                        {% elif data.ix[i,j] < target[i] %}
                            <td bgcolor="#f1948a"><b>{{ data.ix[i,j] }}</b></td>
                        {% elif data.ix[i,j] >= target[i] %}
                            <td bgcolor="#31e960"><b>{{ data.ix[i,j] }}</b></td>
                        {% else %}
                            <td bgcolor=" #cacfd2"><b>{{ data.ix[i,j] }}</b></td>
                        {% endif %}
                    {% else %}
                        <td>{{ data.ix[i,j] }}</td>
                    {% endif %}
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
</div>

现在我想应用datatables jquery进行表搜索,我使用的JS如下:

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#myTable tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

// DataTable
var table = $('#myTable').DataTable();

// Apply the search
table.columns().every( function () {
    var that = this;

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

由于某些原因,搜索在表上不起作用,但排序元素处于活动状态,需要专家的帮助。