Cannot see filter option

[markl181]

I've got a test of this set up, but the filter option doesn't show. Since there is no documentation, I'm having a hard time figuring out why. The pagination, search etc. all show and work, but not the actual filter. Does the filter need to be set up with a jquery function? If so, that won't work for me, I'm using MYSQL to populate the tables on my site.

[hamletUP]

This is true for BS v3.3.7, Bootstrap table 1.11.1, bootstrap-table-filter from Dec 17, 2014 & bootstrap-table-filter extension from Jun 27, 2015.

Inclusion order: bootstrap-table.js bootstrap-table-filter.js <-- EXTENSION! bootstrap-table-filter.js bs-table.js

Set "showFilter = true" on table (js or relevant data-tag), and "filterable = true" on desired columns.

In bs-table.js modify:

try {
    filterType = bootstrapTableFilter.getFilterType(field);
    filter = bootstrapTableFilter.getFilter(field);

    if (typeof filter.values !== 'undefined') {
        value = filter.values.indexOf(value);
    }

    if (filterType && typeof filterData[field] !== 'undefined') {
        ret = ret && bootstrapTableFilter.checkFilterTypeValue(filterType, filterData[field], value);
    }
}

into:

try {
    if (typeof bootstrapTableFilter.filters[field] !== 'undefined') {
        filterType = bootstrapTableFilter.getFilterType(field);
        filter = bootstrapTableFilter.getFilter(field);

        if ((typeof filter.values !== 'undefined') && (filter.type !== 'range')) {
            value = filter.values.indexOf(value);
        }

        if (filterType && typeof filterData[field] !== 'undefined') {
            ret = ret && bootstrapTableFilter.checkFilterTypeValue(filterType, filterData[field], value);
        }
    }
}

Above will fix filtering exception and make range filtering work. Also in bootstrap-table-filter.js (the EXTENSION one) replace: this.data = $.grep(this.options.data, this.searchCallback);

with: this.data = $.grep(this.data, this.searchCallback);

..to make searching and filtering work in conjunction. I think that's all I had to hack... heh.

[markl181]

@daniellbg Thank you for looking at this! I tried these steps but the filter still doesn't show. I think there is a problem in the js files, because if I look at the html when I enable filterable I don't see anything, but if I enable 'sortable', it's there in the html and it works. I wasn't sure where to set the data attribute, so I set it at the th level. Here's the html that gets generated for the th:

Type

I'm not too good with javascript, any thoughts?

[hamletUP]

Not sure, I use javascript only to initialize the table... and I've actually used 'sortable' on all the columns anyway so might be why I got it working. Here's my code:

    <div id="suppTableToolbar">
    </div>
    <table id="suppTable">
    </table>

$(document).on('ready', function() {
    $('#suppTable').bootstrapTable({
        showFilter: true,
        url: '/app/suppAjax',
        columns: [{
            field: 'OrdNo',
            title: 'Order no.',
            sortable: true
        }, {
            field: 'Nm',
            title: 'Supplier',
            sortable: true,
            filterable: true
        }, {
            field: 'OrdDt',
            title: 'Arrival date',
            sortable: true,
            filterable: true
        } ],
        striped: true,
        classes: 'table table-hover table-striped',
        idField: 'OrdNo',
        pagination: true,
        pageList: [10, 25, 50, 100, 'ALL'],
        search: true,
        sortable: true,
        order: 'desc',
        showExport: true,
        exportDataType: 'all',
        toolbar: '#suppTableToolbar'
    });
});

Note I'm also using the export plugin, the showExport and exportDataType properties. Remove those if you're not using it.

[markl181]

@daniellbg finally coming back to this now. Since I'm using php, would you mind sharing the html that comes out of this or a link to your page? I've used the same options in my table but I'm not sure if the way I have everything is correct.

[hamletUP]

@markl181 Sorry, it's an internal customer system with some sensitive data in it, but if you let me know what you are interested in I'll try and grab those parts.

[markl181]

@daniellbg sure - really I'm just interested in the table header and all the attributes there. I'm pretty sure that I'm just missing something in the attributes.