Question

我正在开发一个Flask App，该App处理数据并生成一个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();
        }
    } );
} );} );

由于某些原因，“搜索”不适用于表格，但是排序元素处于活动状态，需要专家的帮助。

Answer 1

datatable插件以及下面的脚本为我成功了，谢谢

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

使用数据表jQuery的烧瓶表搜索

1 个答案: