Question

我正在弄乱laravel和datatables，一切都很好……直到现在。我希望你们中的一些人能够帮助我：）

我有一个“选择”下拉菜单，该菜单搜索数据表中的列之一（更改时）。筛选工作正常，除了pageload上的默认值。

数据表不会在页面加载时进行过滤。 “选择”菜单中的默认值不起作用，我无法找到解决方案，这开始让我发疯。

我的下拉菜单/选择：

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

Answer 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

Answer 2

使用initComplete。

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

数据表，默认选择的输入（选择）不过滤表

2 个答案: