刪除內聯類

Question

我在我的應用程序中使用了材料設計引導數據表。

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

引導的形式，內嵌類相沖突與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>