javascript - 重置数据表下拉选择过滤器

Question

在我的 Laravel 项目中，我使用了数据表过滤器，它工作正常。我的问题是我想添加一个额外的Reset按钮。当我单击Reset按钮时，所有选择字段都将设置为其默认值。附图片：

这是我的脚本

<script>
    $(document).ready(function() {
        $('#exampletable').DataTable( {
            "ordering": false,
            initComplete: function () {
                this.api().columns([3,4,5,9]).every( function (d) {//THis is used for specific column
                    var column = this;
                    var theadname = $('#exampletable th').eq([d]).text();
                    var select = $('<select class="form-control my-1"><option value="">'+theadname+': All</option></select>')
                    .appendTo( '#filtertable' )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                        );

                        column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                    } );
                    column.data().unique().sort().each( function ( d, j ) {
                        var val = $('<div/>').html(d).text();
                        select.append( '<option value="'+val+'">'+val+'</option>' )
                    } );
                } );
            }
        } );
    } );
</script>

这是我在其中放置过滤器选项字段的模态

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-dialog-slideout" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal sideout normal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Launch demo modal sideout normal -->
                <div class="row">
                    <div class="form-group col-8" id="filtertable">
                        {{-- Here modal value comes through script --}}
                    </div>
                    {{-- <div class="form-group col-8" >
                    </div> --}}
                </div>
            </div>
            <div class="modal-footer">
                <button id="resetColumn">Reset</button>
            </div>
        </div>
    </div>
</div>

标签： javascriptphplaraveldatatabledatatables

Answer 1

用表单标签包装你的代码，然后简单地使用触发器功能。

$("form_id_here").trigger("reset");