Smart Search Table not working on Smart Phone

chessGuru64

I added a smart search table on my sample site surprisingly on the first try: https://databasetable-net.000webhostapp.com/

The table is fully responsive on a computer when you make the screen smaller. However, the table pushes left on a smart phone.

This article solution of adding the css: #smart_table{ margin: 0 auto; } did not work.
https://datatables.net/forums/discussion/45913/table-not-centered
Removing the boostrap contrainer also did not work (as that could conflict with datatables CDN). Adding a col-xs-10 container also did not seem to have an impact.

Here is my full code if needed:

<!--========= ADVANCED SEARCH ===============-->

 <center><div class="container-fluid"><h4>Advanced Multi-Search Option (see below)</h4>  <br>

<table class="table table-striped table-bordered table-hover table-condensed" cellpadding="3" cellspacing="0" border="0" style="width: 70%; margin: 0 auto 2em auto;" id="smart_table">
        <thead>
            <tr>
                <th>Target</th>
                <th>Search text</th>
                <th>Treat as regex</th>
                <th>Use smart search</th>
            </tr>
        </thead>
        <tbody>
            <tr id="filter_global">
                <td>Global search</td>
                <td align="center"><input type="text" class="global_filter" id="global_filter"></td>
                <td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
                <td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col1" data-column="0">
                <td>Column - ID</td>
                <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col2" data-column="1">
                <td>Column - First Name</td>
                <td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col3" data-column="2">
                <td>Column - Last Name</td>
                <td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col4" data-column="3">
                <td>Column - Zip</td>
                <td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col5" data-column="4">
                <td>Column - Date</td>
                <td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
                 <tr id="filter_col5" data-column="4">
                <td>Column - Updated</td>
                <td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
            </tr>

        </tbody>
    </table> 
    </div> </center>
    <br>
     <center><div class="container-fluid"><h5>Smart search built-in filtering is "smart" in that it breaks the user's input into individual words and then matches those words in any position and in any order in the table (rather than simple doing a simple string compare). <a href="https://datatables.net/reference/option/search.smart" target="_blank">Click here for more info!</a></h5> </div> </center> <br>
</body>
  </html>

  <script type="text/javascript"> 
  $(document).ready(function() {
function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val(),
        $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    ).draw();
}

function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}

$(document).ready(function() {
    $('#example').DataTable();

    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );

    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );
} ); //end
</script>

chessGuru64

topic header should be Smart Search Table not Centered on Smart Phone. I cannot edit it has been after 15 minutes. Thanks.

allan

The table will currently shrink down to its minimum possible size with all columns shown. If you want it to automatically remove columns so it will continue to shrink beyond that size, you need to use the Responsive extension.

Allan

chessGuru64

This made the table responsive:

$('#myTable').DataTable( { responsive: true "searching": false } );

Note: have to make it searching false as this is a smart table not an actual datatable.

This article make the alignment format centered:
https://stackoverflow.com/questions/10402081/website-left-aligned-on-ipad

<meta name="viewport" content="width=1000; user-scalable=0;" />

Thanks!