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

Question

我正在开发一个 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>

我现在想应用数据表 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();
        }
    } );
} );} );

由于某些原因，搜索在表格上不起作用，但排序元素处于活动状态，请求专家帮助

标签： jqueryhtmlflask

Answer 1

数据表插件和下面的脚本对我有用，谢谢

<script>
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>