猿问

datatables,默认选择的输入(select)不过滤表

我在搞乱 laravel 和数据表,一切都很好......直到现在。我希望你们中的一些人可以帮助我:)


我有一个选择下拉菜单,用于搜索数据表中的一列(更改时)。过滤工作正常,除了页面加载的默认值。


数据表不会在页面加载时过滤。选择菜单中的默认值不起作用,我找不到解决方案,它开始让我发疯。


我的下拉/选择:


<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>

数据表代码:


$(document).ready(function() {

    var table =  $('#changeMotorForm').DataTable({

        columnDefs: [

            { orderable: false, targets: -1 }

        ]}

    });


    $('#filter_effect').on('change', function () {

        table.columns(1).search( this.value ).draw();

    });

});

只是为了说清楚。数据表的过滤工作正常,开箱即用。与选择输入过滤相同 - 效果很好。这是导致问题的默认值。它不会在页面加载时过滤/搜索数据表,只有当我选择另一个<option>.


更新:工作代码:


    <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>


四季花海
浏览 94回答 2
2回答

交互式爱情

you can apply filter soon after the DataTable initializationvar table =&nbsp; $('#changeMotorForm').DataTable({&nbsp; &nbsp; columnDefs: [&nbsp; &nbsp; &nbsp; &nbsp;{ orderable: false, targets: -1 }&nbsp; &nbsp; ]}});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

慕后森

使用initComplete.var table =&nbsp; $('#changeMotorForm').DataTable({&nbsp; &nbsp; columnDefs: [&nbsp; &nbsp; &nbsp; &nbsp;{ orderable: false, targets: -1 }&nbsp; &nbsp; ],&nbsp; &nbsp; initComplete: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.columns(1).search($('#filter_effect').val()).draw();&nbsp; &nbsp; }});
随时随地看视频慕课网APP
我要回答