为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

PHP
四季花海 2022-05-27 10:22:03
我在搞乱 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>
查看完整描述

2 回答

?
交互式爱情

TA贡献1712条经验 获得超3个赞

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


查看完整回答
反对 回复 2022-05-27
?
慕后森

TA贡献1802条经验 获得超5个赞

使用initComplete.


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

    columnDefs: [

       { orderable: false, targets: -1 }

    ],

    initComplete: function() {

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

    }

});


查看完整回答
反对 回复 2022-05-27
  • 2 回答
  • 0 关注
  • 93 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信