Remove form-inline class

Question

I'am using material design bootstrap datatable in my application.

https://datatables.net/examples/styling/material.html

Bootstrap's form-inline class conflicting with the datables style.

html

<table id="example" class="mdl-data-table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>

script

<script type="text/javascript">
    $(document).ready(function() {      
        $('#example').DataTable( {
            columnDefs: [
                {
                    targets: [ 0, 1, 2 ],
                    className: 'mdl-data-table__cell--non-numeric'
                }
            ]
        } );

    } );

</script>

I have seen this solution

https://datatables.net/forums/discussion/40105/prevent-form-inline-class.

but I'am getting this error .

jquery-3.1.1.min.js:2 Uncaught ReferenceError: table is not defined

Actually where to place the below code?

$( table.table().container() ).removeClass( 'form-inline' );

Answer 1

Try this code

       <script type="text/javascript">
            $(document).ready(function() {      
               var table =  $('#example').DataTable( {
                    columnDefs: [
                        {
                            targets: [ 0, 1, 2 ],
                            className: 'mdl-data-table__cell--non-numeric'
                        }
                    ]
                } );

                $( table.table().container() ).removeClass( 'form-inline' );

            } );
        </script>