DataTable with column filter keep expanding when toggle filter

Muhammad Izzat

Greeting, I have a project list in my page, When I click on a project a DataTable with column filter in a dropdown list will be display. Its working but there's a slight bug in it.

Whenever I filter the table using the dropdown list several times, the table position become distorted and it keep expanding

Here's my code

HTML

<table id="workorder_table" class="display table table-responsive">
<thead>
<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span>Column Filter</span> <span class="caret"></span></button>
        <ul id="myDropdown" class="dropdown-menu">
            <li><a href="#" class="toggle-vis" data-column="0"><i class="fa fa-check"></i> A</a></li>
            <li><a href="#" class="toggle-vis" data-column="1"><i class="fa fa-check"></i> B</a></li>
            <li><a href="#" class="toggle-vis" data-column="2"><i class="fa fa-check"></i> C</a></li>

        </ul>
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create_workorder_modal"><span
        class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i
        class="fa fa-fw fa-plus"></i></button>
</div>

<tr>
    <th class="small text-muted text-uppercase"><strong>A</strong></th>
    <th class="small text-muted text-uppercase"><strong>B</strong></th>
    <th class="small text-muted text-uppercase"><strong>C</strong></th>
</tr>
</thead>
</table>

javascript

<script>
    $(document).ready(function() {
        var table = $('#workorder_table').DataTable( {
            "scrollY": "200px",
            "paging": false
        } );

        $('a.toggle-vis').on( 'click', function (e) {
            e.preventDefault();

            // Get the column API object
            var column = table.column( $(this).attr('data-column') );

            // Toggle the visibility
            column.visible( ! column.visible() );
        } );
    } );
</script>
<script>
    $('#myDropdown > li > a').click(function(e){
        $(this).toggleClass('selected');
        $('.dropdown-menu').dropdown('toggle');
    });
</script>

Any help is much appreciated

jbradfield

I have noticed the same issue when i use scrollY
Did you ever find a solution?