数据表 - 使用滚动条水平时，Tfoot表单不起作用

Question

我有数据，我想使用数据表显示我的数据

我想使用水平滚动条显示数据表中的数据，
但是当我添加水平滚动条时我遇到了问题 用于搜索的Tfoot表单被禁用

在使用水平滚动条之前，这是我的表格
你可以看到底部tfoot形式已启用

您可以在底部tfoot表单中看到仅禁用文本

当我激活水平滚动条时，如何启用tfoot表单？

这是我的代码：

<table id="example"width="100%">    
                                    <thead>
                                    <tr>
                                        <th>Provinsi</th>
                                        <th>Kota/Kabupaten</th>
                                        <th>Kecamatan</th>
                                        <th>Jenjang</th>
                                        <th>Nama Sekolah</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                    <tbody>
                                    </tbody>
                                <tfoot>
                                        <th>Provinsi</th>
                                        <th>Kota/Kabupaten</th>
                                        <th>Kecamatan</th>
                                        <th>Jenjang</th>
                                        <th>Nama Sekolah</th>
                                        <th>Action</th>
                                </tfoot>
                                </table>

    <script type="text/javascript" language="javascript" >
    var dTable;

                $(document).ready(function() {
                    dTable = $('#example').DataTable( {
                        "bProcessing": true,
                        "bServerSide": true,
                        "bJQueryUI": false,
                        "responsive": true,
                        "sAjaxSource": "pages/proses/serverSide.php?type=kategori_sekolah",
                        "sServerMethod": "POST",
                        "scrollX": true,
                        "columnDefs": [
                        { "orderable": true,  "targets": 0, "searchable": true },
                        { "orderable": true,  "targets": 1, "searchable": true },
                        { "orderable": true,  "targets": 2, "searchable": true },
                        { "orderable": true,  "targets": 3, "searchable": true },
                        { "orderable": true,  "targets": 4, "searchable": true },
                        { "orderable": false, "targets": 5, "searchable": false }
                        ]
                    } );

                    $('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
                    $('#example tfoot th').each( function () {


                        if( $(this).text() != "Action" ){
                            var title = $('#example thead th').eq( $(this).index() ).text();
                            $(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" />' );
                        }
                    } );


                    dTable.columns().every( function () {
                        var that = this;

                        $( 'input', this.footer() ).on( 'keyup change', function () {
                            that
                            .search( this.value )
                            .draw();
                        } );
                    } );
                } );
    </script>

帮助我，谢谢