Bottom Search disable when enable Scroll X in Data

i'm try data show in datatables https://datatables.net/

i can show data from MYSQL to Datatables, but i want column in datatables show all

This image, you can see there 1 column, must be click button plus, if show many column.

i already search, enable scroll X in datatables https://datatables.net/examples/basic_init/scroll_x.html

and when i put code "scrollX": true in my code

and add jquery https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

this result like this, you can see my input search in bottom has been disabled. and my template datatables does not work. i'm confused to fix it :(

i want to show all my data, with scroll-x and template datatables, search bottom, still work.

Online Demo Test : http://gajelos.tk/test/index.php

This is my code

<HTML>
    <HEAD>

        <!-- JQUERY -->
        <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 

        <!-- BOOTSTRAP -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>


        <link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.bootstrap.css">
        <link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.responsive.css">
        <script type="text/javascript" language="javascript" src="assets/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" language="javascript" src="assets/media/js/dataTables.responsive.js"></script>
        <script type="text/javascript" language="javascript" src="assets/media/js/dataTables.bootstrap.js"></script>
        <script type="text/javascript" language="javascript" src="assets/media/js/common.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js "></script>

    </HEAD>
    <BODY>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <button onClick="showModals()" class="btn btn-primary">Tambah Data</button>
                    <br>
                    <hr>
                    <br>
                    <table id="example"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                        <thead>
                            <tr>
                                <th>Action</th>
                                <th>SIM</th>
                                <th>Nama</th>
                                <th>Berlaku (SIM)</th>
                                <th>Jenis</th>
                                <th>Plat Nomor</th>
                                <th>Berlaku (Kendaraan)</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <th>Action</th>
                            <th>SIM</th>
                            <th>Nama</th>
                            <th>Berlaku (SIM)</th>
                            <th>Jenis</th>
                            <th>Plat Nomor</th>
                            <th>Berlaku (Kendaraan)</th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>


        <script type="text/javascript" language="javascript" >
var dTable;
            // #Example adalah id pada table
            $(document).ready(function() {
                dTable = $('#example').DataTable( {
                    "bProcessing": true,
                    "bServerSide": true,
                    "bJQueryUI": false,
                    "responsive": true,
                    "sAjaxSource": "serverSide.php", // Load Data
                    "scrollX": true,
                    "sServerMethod": "POST",
                    "columnDefs": [
                    { "orderable": false, "targets": 0, "searchable": false },
                    { "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": true, "targets": 5, "searchable": true },
                    { "orderable": true, "targets": 6, "searchable": true }
                    ]
                } );

                $('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
                //$('#example tfoot tr th').each( function () {
                var i = 0;
                $('.table').find( 'tfoot tr th' ).each( function () {
                    //Agar kolom Action Tidak Ada Tombol Pencarian
                    if( $(this).text() != "Action" ){
                        var width = $(".sorting_1").width();
                        var title = $('.table thead th').eq( $(this).index() ).text();
                        $(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" style="width:'+width+'" />' );
                    }
                    i++;
                } );

                // Untuk Pencarian, di kolom paling bawah
                dTable.columns().every( function () {
                    var that = this;

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

help me, thank's