javascript - 如何设置 JQuery 数据表

Question

所以我试图设置一个 JQuery 数据表，如本例所示: http://plnkr.co/edit/b8cLVaVlbNKOQhDwI2mw?p=preview

但是当我尝试实现它时，我不断收到“未找到匹配记录”的弹出窗口。我该如何修复它？

这是我的 JS 脚本:

$(function() {
        otable = $('#amdta').dataTable();
        })

        function filterme() {
        //build a regex filter string with an or(|) condition
        var types = $('input:checkbox[name="item"]:checked').map(function() {
            return '^' + this.value + '\$';
        }).get().join('|');
        //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
        otable.fnFilter(types, 1, true, false, false, false);

        //build a filter string with an or(|) condition
        var frees = $('input:checkbox[name="website"]:checked').map(function() {
            return this.value;
        }).get().join('|');
        //now filter in column 2, with no regex, no smart filtering, no inputbox,not case sensitive
        otable.fnFilter(frees, 2, false, false, false, false);

这是我的 HTML

<p>
    <label>
        <input onchange="filterme()" type="checkbox" name="website" class="filled-in" value="canadacomputers" />
        <span>Canada Computers</span>
    </label>
    <label>
        <input onchange="filterme()" type="checkbox" name="item" class="filled-in" value="$2299.0" />
        <span>Item</span>
    </label>
</p>

<input type="text" id="amdin" onkeyup="amdfun()" placeholder="Search for CPU..">

<table id="amdta">

    <thead>
        <tr>
            <th class="th-sm">Item</th>
            <th class="th-sm">Price</th>
            <th class="th-sm">Website</th>
        </tr>
    </thead>

    {% for item in items %}
        {% if item.brand == 'amd' %}
            <tbody>
                <tr>
                    <td>{{ item.item }}</td>
                    <td>${{ item.price }}</td>
                    <td>
                        <a href="{{ item.website }}">{{ item.site }}</a>
                    </td>
                </tr>
            </tbody>
        {% endif %}
    {% endfor %}

</table>

Answer 1

如果您只是按特定价格进行过滤，则无需使用正则表达式，只需使用单个值应用过滤器即可。添加一些具有实际值而不是模板的示例行并准确指定您要通过每个复选框过滤的内容可能会有所帮助。更好的是，创建一个 plnkr 并提供该链接。