datatables, default selected input (select) does not filter table

Question

I'm messing around with laravel and datatables and everything has been fine... until now. I hope some of you might be able to help me :)

I got a Select dropdown menu, that search one of the columns in the datatable (on change). The filtering works fine, except the default value on pageload.

The datatable does not filter on pageload. The default value from the Select menu does not work and I cant find a solution for this and it's starting to drive me crazy.

My dropdown/select:

<select class="ml-2" id="filter_effect">
    @foreach($effects as $effect)
        <option value="{{ $effect->title }}"
                @if($effect->id == $configurator->motor->effect_id)
                selected
                @endif
        >{{ $effect->title }} kW</option>
    @endforeach
</select>

Datatables code:

$(document).ready(function() {
    var table =  $('#changeMotorForm').DataTable({
        columnDefs: [
            { orderable: false, targets: -1 }
        ]}
    });

    $('#filter_effect').on('change', function () {
        table.columns(1).search( this.value ).draw();
    });
});

Just to make it clear. The filtering of the datatable works fine, out of the box. Same with the select input filtering - works great. It's the default value that is causing problems. It does not filter/search the datatable on pageload, only when I select another <option>.

UPDATE: Working code:

    <script>

    $(document).ready(function() {

        var table =  $('#changeMotorForm').DataTable({
            columnDefs: [
               { orderable: false, targets: -1 }
            ]
        });

        table.columns(1).search( $('#filter_effect').val() ).draw();

        $('#filter_effect').on('change', function () {
            table.columns(1).search( this.value ).draw();
        } );

    });

</script>

i see no onload event. so, it won't filter datatable. add filtering after datatable initialization — Roman Meyer
– Roman Meyer, Commented Nov 27, 2019 at 14:18

Hassan Tahir · Accepted Answer · 2019-11-27 14:20:42Z

1

you can apply filter soon after the DataTable initialization
var table =  $('#changeMotorForm').DataTable({
    columnDefs: [
       { orderable: false, targets: -1 }
    ]}
});

table.columns(1).search( $('#filter_effect').val() ).draw();
OR make first option value none instead of real values.
so user can select to apply filter

answered Nov 27, 2019 at 14:20

Hassan Tahir

1329 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kenneth Poulsen Over a year ago

This worked! Going to update my post with working code :D

mark_b · Accepted Answer · 2019-11-27 14:23:10Z

0

Use initComplete.

var table =  $('#changeMotorForm').DataTable({
    columnDefs: [
       { orderable: false, targets: -1 }
    ],
    initComplete: function() {
        this.columns(1).search($('#filter_effect').val()).draw();
    }
});

answered Nov 27, 2019 at 14:23

mark_b

1,49312 silver badges19 bronze badges

3 Comments

Kenneth Poulsen Over a year ago

Can't get that to work. It breaks the table "draw". Only displaying a standard table now - no datatable. Will look into it more when I get home from work :)

mark_b Over a year ago

I had to remove an erroneous curly bracket after the columnDefs square bracket. Maybe it was that?

Kenneth Poulsen Over a year ago

Same result. No initial filtering on the table and the select menu has stopped working. The table is converted to datatables now though.

Collectives™ on Stack Overflow

datatables, default selected input (select) does not filter table

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related