Dropdown select filter not working on server side

Dropdown select filter not working on server side

A77akA77ak Posts: 2Questions: 2Answers: 0
edited January 2017 in Free community support

I have a datatable loaded with server side working fine. Now I want to add some column filter (those with filter class) but is not working.
Here is my html:

<div class="data-table">
     <table id="js-table" class="table">
          <thead>
               <tr>
                    <th class="filter">Col1</th>
                    <th class="filter">Col2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                    <th>Col5</th>
               </tr>
          </thead>
     </table>
     <div class="selects"></div>
</div>

And my js:

var $tableCon = $('.data-table:eq('+ 1 +')');
var $table = $tableCon.find('.table');
            
var dataTable = $('#js-table').DataTable( {
        "processing": true,
        "serverSide": true,
        "bFilter": false,
    "ordering": false,
    "bLengthChange": false,
        "ajax": "/agetdatatable",
        },
    initComplete: function(){
            $tableCon.find('.selects').insertBefore($('#js-table'))
            var counter = 0;
            dataTable.columns('.filter').every( function (e) {
                var column = this;
                $tableCon.find('.selects').append('<div class="select-holder"><label><span class="label">'+ $table.find('thead th:eq('+ e +')').html() +'</span><select><option value="">- All -</option></select></label>');
                var select = $tableCon.find('.selects .select-holder:eq('+ counter +') select')
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false );
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );

                counter++;
            } );
        }
    } );

The dropdown select is loading well, but when I click on it datatable is not refreshing.

Any help would be helpful

This discussion has been closed.