multi select filter in datatables

kepsnius

Hi, i have issue with my code for multi select function in data table.
I need choose group name, and then only show what group if selected more, then show only who was selected.
Now i dont get any result idk where i made mistake.
my code for multiselect
<select class="selectpicker" name="MultiSelectGroup" multiple> <option id="gruop" >PT CALENDAR</option> <option id="gruop" >ESP CALENDAR</option> <option id="gruop" value="PT CALENDAR">UK CALENDAR</option> </select>

My js code

           $(function () {
           $('select').selectpicker();{
           $('input[name="MultiSelectGroup"]').on("click", function(){
            const selectedGroup = $(this).text(); 

        var url = '/api/v1/calendar/get?='+ this
        console.log('new URL'+url);
        table.ajax.url(url).load();
        table.ajax.reload();

    });
}

});
```
my datatable in html

              ```<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%">TICKER</th>
                        <th scope="col" style="width: auto;">EVENT </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">TICKER</th>
                <th scope="col">EVENT </th>
                <!--<th scope="col">READX</th>  -->       
                <th scope="col" >ACTION</th>


                   </tr>
              </tfoot>
            </table>
             </div>
               ```

my js for fill date in datatable

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

    "order": [[ 3, "asc" ]],
    "ajax": "/api/v1/calendar/get",
    'columnDefs': [

        {

           targets: 2, render: function(data1){ return moment(data1).format('dddd')},
        }, //data-toggle="modal" data-target="#exampleModal"
        {
           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')}},

    ]


} );

```

some link for multiselect
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

                      ```<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>```


                     ```<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>```

how it look in img

Any idea where i do wrong, i think something with js code.. Thank you for your help

kepsnius

URL is good if use only one group name.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin