javascripthtmlfilterbootstrap-tabledata-filtering

Filter multiple badges in a bootsrap-table column

I have a table made with bootstrap-table and I have a column "status" in which a cell can contains multiple html badges.

I have a select data-filter-control but it doesn't work correctly. The first problem was that I had html content in filter selection like this:

enter image description here

I resolved the first problem by add a data-filter-data-collector like this :

<th data-field="status" data-filter-control="select" data-align="center" data-filter-data-collector="tableFilterStripHtml">Status</th>

Here the js code for tableFilterStripHtml:

window.tableFilterStripHtml = function (value) {
    return value.replace(/<[^>]+>/g, '').trim();
}

Now the filter still doesn't work correctly. The problem is that I have same data in multiple rows selection of the filter. And for one row I should have one data, not multiple. See this:

enter image description here

enter image description here

How to fix this problem?

Solution

  • Just found the solution by myself, here the js code :

    window.tableFilterStripHtml = function (value) {
    var badges = value.match(/<span[^>]*>(.*?)<\/span>/g) || [];
    return badges.map(function (badge) {
        return badge.replace(/<[^>]+>/g, '').trim();
    });
};