【问题标题】:datatables, default selected input (select) does not filter tabledatatables,默认选择的输入(select)不过滤表
【发布时间】:2020-03-23 02:30:39
【问题描述】:

我在搞乱 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();
    });
});

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

更新:工作代码:

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

【问题讨论】:

  • 我看不到 onload 事件。所以,它不会过滤数据表。数据表初始化后添加过滤

标签: php jquery laravel datatables


【解决方案1】:

使用initComplete

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

【讨论】:

  • 无法让它工作。它打破了表格“平局”。现在只显示标准表 - 没有数据表。当我下班回家时会更多地研究它:)
  • 我不得不在 columnDefs 方括号之后删除一个错误的大括号。也许是这样?
  • 同样的结果。表格上没有初始过滤,选择菜单已停止工作。该表现在已转换为数据表。
【解决方案2】:
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

【讨论】:

  • 这成功了!要用工作代码更新我的帖子:D
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-08-29
  • 2017-04-23
  • 2018-08-06
  • 2021-08-22
  • 2021-12-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多