Trigger search when condition selected

Trigger search when condition selected

bablazabablaza Posts: 9Questions: 3Answers: 0

Say I have a column that may or may not contain text. I would like to have a condition option for this column similar to "is empty", and have a search triggered as soon as the condition is chosen. Specifically, I don't want for the user to have to make a selection from an additional select element or text input.

I actually have this working in that I have a custom plug-in that filters for empty data. If the conditions are pre-loaded (for example, I make my choices, then reload the page), the filtering happens. But I want to trigger the filtering when the condition is selected.

If that's not clear, I can try to stand up a public example.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954

    If I understand your description maybe you can just use a flag to determine if the code in the plugin should execute. For example:

    $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter ) {
            if ( ! findEmpty ) 
                return true;
            {
    
            // plugin code goes here
        }
    );
    

    If the findEmpty flag is true then execute the plugin code. Otherwise just return true.

    If this doesn't help then please post your relevant JS code so we can see what you have. Better is a test case so we can provide updated code to offer suggestions.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • bablazabablaza Posts: 9Questions: 3Answers: 0

    I am in the process of adding this to a live site so you can see it, but until then, here's the code I have tried:

    enforceAct: {
        isNone: {
            conditionName: "is none",
            init: function(that, fn, preDefined = null) {
                let el = jQuery('<input>')
                    .attr('type','hidden')
                    .attr('id', that.s.type)
                    .append(that.dom.valueTitle)
                    .on('input', function() {
                        fn(that, this);
                    });
    
                return el;
            },
            inputValue: function (el, that) {
                return "";
            },
            isInputValid: function (el, that) {
                return true;
            },
            search: function (value, comparison) {
                if(value > ""){
                    return false;
                }
                return true;
            }
        },
    }
    

    There is a column 'enforceAct'. I want to return rows for which this column is empty.

    init returns an element, but it's not used for anything. When I returned nothing, it threw an error, so I create a hidden text field, but no actual input field is necessary for this.

    inputValue isn't used, so just return an empty string. Similarly, isInputValid is always true.

    For search, the comparison value is hardwired, so to speak, so only need to test value.

    As I said, this works if the search is 'saved' and the page is loaded, but not triggered when the 'is none' condition is selected. Interestingly, if I add a console.log comment in the search function, it looks like it fires when the condition is chosen, but the comparison is not made.

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    Answer ✓

    Sorry, I misunderstood the question, thought you meant a search plugin. Didn't realize you were using SearchBuilder. I copied your code into this test case:
    https://live.datatables.net/dumoyiwo/1/edit

    It seems the inputValue and isInputValid return values you have are causing the search function to run too soon. It appears they want the el element to be created and used. I add some code to trigger the input change:

                    setTimeout(function() {
                      $(el).val(' ').trigger("input");
                    }, 0);
    

    And have the return statements use $(el).val(). This seems to fake out the need for the input.

    Kevin

  • bablazabablaza Posts: 9Questions: 3Answers: 0

    That's brilliant. Works like a charm. Thank you!

Sign In or Register to comment.