jquery - 删除表单内联类

Question

我在我的应用程序中使用 Material 设计 Bootstrap 数据表。

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

Bootstrap 的 form-inline 类与 datables 样式冲突。

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

    } );

</script>

我见过这个解决方案

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

但我收到此错误。

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

下面的代码到底应该放在哪里？

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

Answer 1

试试这个代码

       <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>