带有FilterTable jQuery插件的Django中的表filter列

Question

我在django模板中创建一个表：

<table id="table" class="table table-striped table-hover table-condensed">
    <thead>
        <tr>
            <th>User</th>
            <th>Company</th>
        </tr>
    </thead>
    <tbody>
        {% for user in user_list %}
        <tr>
            <td><a href="{% url 'user:edit_user' user %}">{{ user }}</a></td>
            <td>{{ user.userprofile.company }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

我想添加一个过滤器输入，发现这个：FilterTable这个插件把一个输入放在表的前面，但是如果我用django标记来呈现模板，如果我放了一个简单的表，它可以正常工作，在我的django模板中实现它吗？在

Answer 1

是的，应该可以。在

根据您链接到它的文档，应该如下所示：

<script src="/path/to/jquery.js"></script>
<script src="/path/to/bindWithDelay.js"></script> <!  optional  >
<script src="/path/to/jquery.filtertable.js"></script>
<style>
.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
</style> <!  or put the styling in your stylesheet  >

<table id="table" class="table table-striped table-hover table-condensed">
    <thead>
        <tr>
            <th>User</th>
            <th>Company</th>
        </tr>
    </thead>
    <tbody>
        {% for user in user_list %}
        <tr>
            <td><a href="{% url 'user:edit_user' user %}">{{ user }}</a></td>
            <td>{{ user.userprofile.company }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
$('table').filterTable(); //if this code appears after your tables; otherwise, include it in your document.ready() code.
</script>

注意：只有安装了jquery并正确设置了路径（在代码块的顶部），这才有效。在

Answer 2

如果将来有人需要，解决方案是插件过滤器从表中的9条记录中出现，而当我尝试时只有3个条目

这是我的jQuery调用，从10个记录中筛选并选择一个来自我自己的输入，名为input-filter：

$('table').filterTable({
    filterSelector: '#input-filter',
    minRows: 10
});