html - Select2 with Datatable

Question

I have the following html code which is initialized by the jquery select2 custom script. However my filtering using this select option is not working. I am not sure where the error is.

                    <div class="col-auto">
                    <!-- Select -->
                    <select class="js-select2-custom" size="1" style="opacity: 0;"
                            data-target-column-index="1"
                            data-hs-select2-options='{
                  "minimumResultsForSearch": "Infinity",
                  "customClass": "custom-select custom-select-sm custom-select-borderless",
                  "dropdownAutoWidth": true,
                  "width": true
                }' >
                        <option value="">Any</option>
                        <option value="Accountant">Accountant</option>
                        <option value="Co-founder">Co-founder</option>
                        <option value="Designer">Designer</option>
                        <option value="Developer">Developer</option>
                        <option value="Director">Director</option>
                    </select>
                    <!-- End Select -->
                </div>


<script src="~/front-dashboard-v1.1/dist/assets/vendor/select2/dist/js/select2.full.min.js"></script>
<link href="~/front-dashboard-v1.1/dist/assets/vendor/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/front-dashboard-v1.1/src/assets/js/hs.datatables.js"></script>
<script src="~/front-dashboard-v1.1/dist/assets/vendor/datatables/media/js/jquery.dataTables.js"></script>
<script>
    $(document).on('ready', function () {
        $.HSCore.components.HSDatatables.init($('.js-datatable'));

        // INITIALIZATION OF SELECT2
        // =======================================================
        $('.js-select2-custom').each(function () {
            var select2 = $.HSCore.components.HSSelect2.init($(this));
        });


        var element = document.getElementById("datatableWithSearch");
        element.style.display = null;

        if ($(this).find('tbody tr').length <= 1) {
            $('.js-datatable').parents('div.card').first().hide(-1);
        }
    });

</script>

question from:https://stackoverflow.com/questions/66062905/select2-with-datatable

Answer 1

Waitting for answers