Apply seachbuilder filter when pressing a button

ECEGROUPE

Hello,

I have a datatables set up and i would like to send a filter to my tables (using seachbuilder) when i press a button (or a div doesn't matter) in my page, how do i do this ?

i have tried :

table.searchBuilder
    .destroy() // Supprimez les filtres existants
    .conditions([ // Ajoutez un filtre pour la colonne Collaborateur
        { label: 'Collaborateur', name: 'COLLABORATEUR_AD', type: 'text', value:  }
    ])
    .filterChanged(); // Appliquez le filtre

but it doesn't work for me, i have this error Uncaught TypeError: table.searchBuilder.destroy is not a function and i have the same error with conditions when i don't use .destroy !

Thx for your help / time,
Mathieu.

kthorngren

Here is a list of SearchBuilder API's:
https://datatables.net/reference/api/#searchbuilder

There is nothing documented for the API's you are trying to use. It is expected that the buttons created by SearchBuilder are used to build the search expressions.

Are you trying to use SearchBuilder with API calls instead of the SearchBuilder buttons?

Kevin

ECEGROUPE

yes i m trying to use seachbuilder with api calls and not with the seachbuilder buttons, is there a way to do this ?

ECEGROUPE

Ok this work when i click on my div :

$('#mytable').DataTable().searchBuilder.rebuild({
    "criteria": [
        {
            "condition": "=",
            "data": "Collaborateur",
            "origData": "COLLABORATEUR_AD",
            "type": "string",
            "value": [
                "His name"
            ]
        }
    ],
    "logic":"AND"
});

the problem with that is it doesn't change the searchbuilder buttons name with filter(1) like it normaly does to show that there is a filter active, how to solve that ?

kthorngren

Sorry I forgot how searchBuilder.rebuild() works Good find!

I think this test case shows the problem you are asking about:
https://live.datatables.net/vazuwuza/1/edit

Seems like there is an issue in SearchBuilder with updating the button when using `-api searchBuilder.rebuild(). To see the issue create a filter, click Get button then Clear button. Use Revert to reapply the filter. The button is not updated. Click the button then close the filter, leaving it applied, the button now shows the number of filters.

Kevin

ECEGROUPE

I saw this see test case yesterday and yes there is a same problem on it, you have to open the filter and leave it applied for it to shows the numbers of filters actives. It shouldn't work like that but already show the correct number of filter when i click the button revert right ? Do you a fix for this ?

kthorngren

Its something @allan will need to look at to fix.

Kevin

ECEGROUPE

Hi @allan,

Can you come back to me when this is fix pls ? or give me a solution to fix it by myself ?

Thx

ECEGROUPE

I think i can help you, i have find a solution

I use a context menu and when the user click on it apply a seachbuilder filter that filter all null value from the table (with this code, this correctly increments the number of filters in the filter button ) :

// start: ContextMenu
$.contextMenu({
    selector: '#mytable tbody td', 
    callback: function(key, options) {
        var cell = $(this); 
        var rowIndex = cell.parent().index(); 
        var columnIndex = cell.index();

        if (key === 'removeEmptyValues') {

            var columnSettings = table.settings()[0].aoColumns[columnIndex];

            var columnName = columnSettings.searchBuilderTitle || columnSettings.sTitle || columnSettings.data;

            var columnType = table.settings()[0].aoColumns[columnIndex].sType;

            var columnData = table.column(columnIndex).data();

            var newSearchCriteria = {
                "criteria": [
                    {
                        "condition": "!=",
                        "data": columnName,

                    }
                ],
                "logic": "AND"
            };

            table.searchBuilder.rebuild(newSearchCriteria);
        }
    },
    items: {
        removeEmptyValues: { name: 'Enlever les valeurs vides' }
    }
});
// end: ContextMenu

BUT if i modify / add this line of code (that filter the table based of the value clicked when the user oponed the context menu, it doesn't increment the filter button anymore :

// add
var filteredData = columnData.filter(function(value) {
                return value !== '' && value !== null;
            });

// modify
            var newSearchCriteria = {
                "criteria": [
                    {
                        "condition": "=",
                        "data": columnName,
                        "value": filteredData

                    }
                ],
                "logic": "AND"
            };

Hope it can help you