Datatables multiple filter function

Question

i have problem with making in datatable multiple filter function. Idk how to set javascript for show data correct tags are selected.

my multiselect html code

<select class="selectpicker" name="MultiSelectGroup" multiple>
    <option id="gruop" >Group 1</option>
    <option id="gruop" >Group 2</option>
    <option id="gruop" >Group 3</option>
  </select>

js code for multiselect

  $(function () {
    $('select').selectpicker();{
        $('input[name="MultiSelectGroup"]').on("click", function(){
            const selectedGroup = $(this).text(); //
    
            var url = '/api/test/data/get?='+ selectedGroup
            console.log('new URL'+url);
            table.ajax.url(url).load();
            table.ajax.reload();
           
        });
    }
    
});

I now its not finished function... but idk how to do it. I get data from this link for datatable rows.

"ajax": "/api/test/data/get",

});

my table html code

<div class="row-90">
        <table class="table display" id="calEvents">
            <thead>
               
                <tr>
                    <th scope="col" style="width: 1%;">ID</th>
                    <th scope="col" style="width: 8%;">GROUP</th>
                    <th scope="col" style="width: 1%;">WEEKDAY</th>
                    <th scope="col" style="width: 6%;">DATE</th>
                    <th scope="col" style="width: 10%">INFO</th>
                    <th scope="col" style="width: auto;">INFO 2</th>  
                    <th scope="col" style="width: 9%;">ACTION</th>
               
                </tr>
            </p>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">INFO</th>
                    <th scope="col">INFO 2</th>      
                    <th scope="col" >ACTION</th>
        
                   
                </tr>
            </tfoot>
        </table>
    </div>

My js code who set data in tadatable.

  var table = $('#calEvents').DataTable( {
        "processing": true, 
        "serverSide": false,

        "order": [[ 3, "asc" ]],
        "ajax": "/api/test/data/get",
        'columnDefs': [
         
            {
                
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            },
            {
               targets: -1, defaultContent: '<button name="edit" class="btn btn-secondary btn-sm" style="font-size: 0.8em;" type="button">Edit</button>'
                 + '&nbsp <button name="delete" class="btn btn-danger btn-sm" style="font-size: 0.8em;" type="button">Delete</button>'
            },
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
          
        ]
 
     
    } );

UPDATED, its my function from where i pick date to my datatable

   @api.route('/data', methods=['GET'])
    @login_required
    def data_get():
        a = []
        if request.args.get('q'): 
            q = request.args.get('q')
            app.logger.debug(q)
            query = "SELECT groupName from dbo.CalGroups WHERE groupName like '%{0}%'".format(q)
            app.logger.debug(query)
            cursor.execute(query)
        else: cursor.execute("SELECT groupName from dbo.CalGroups")
        for row in cursor:
            a.append(row[0]) 
        app.logger.debug(a)
        return jsonify(a)

Answer 1

Okay there are a few things wrong with your code:

1. You used the same id for all option tags. This is wrong because id is meant to target one selector specifically, not multiple ones. In that case, class='group' will be a better option.
2. Your option tag requires a value. This value should the group name/number. So, it will be <option class='group' value='group1'>Group 1</option> .
3. On your on click handler, you should check for the click target and get the value of the group:

$('input[name="MultiSelectGroup"]').on("click", function(){
    const selectedGroup = $(this).val(); // or $(this).text() for Group 1
    // now you can save this value as a global variable
   // or maybe send to backend server right away
});

4. Lastly, you have to send the values. Since you are using jquery, look for how to do that here on Jquery docs .

Hope that helps you get your code working. All the best.