CODEWITHSUNDEEP
javascriptjqueryhtmldjango
explodingfilms101
explodingfilms101

Reputation: 588

How to setup a JQuery Datatable

So I was trying to set-up a JQuery Datatable as in this example: http://plnkr.co/edit/b8cLVaVlbNKOQhDwI2mw?p=preview

But I keep getting a "No matching records found" pop-up when I try to implement it. How would I be able to fix it?

Here is my JS script:

$(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);

Here is my 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>

Upvotes: 0

Views: 129

Answers (1)

Sonny N
Sonny N

Reputation: 182

If you are simply filtering by a specific price, you do not need to use regular expression, you just apply the filter using the single value. It might be helpful to add some sample rows with actual values instead of the template and specify exactly what you are trying to filter by each of those check boxes. Better yet, create a plnkr and provide that link.

Upvotes: 1

Related Questions