2017-08-04 2 views
1

私はアプリケーションでデータ設計可能な素材設計のブートストラップを使用しています。 datablesスタイルで競合フォームインラインクラスを削除

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

ブートストラップのフォームインラインクラス。

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'); 
+0

を試してみてください?クラスを削除するには? – RacoonOnMoon

+0

あなたは$( "table")を使うことはできません。removeClass( 'form-inline'); ? – RacoonOnMoon

+0

このリンクをご覧くださいhttps://datatables.net/forums/discussion/40105/prevent-form-inline-class – Shalom

答えて

1

あなたは().tableを必要とする理由、このコード

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