Apply seachbuilder filter when pressing a button

Apply seachbuilder filter when pressing a button

ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1
edited November 2023 in SearchBuilder

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1

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

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1
    edited November 2023

    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 ?

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Sorry I forgot how searchBuilder.rebuild() works :smile: 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

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1

    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 ?

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

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

    Kevin

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1

    Hi @allan,

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

    Thx :)

  • ECEGROUPEECEGROUPE Posts: 77Questions: 28Answers: 1
    edited November 2023

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

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

Sign In or Register to comment.