2017-05-23 19 views
0

I持って、次のHTML:のDataTableには、私のデータで正常に動作します

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"> 
    <!--<thead> 
     <tr> 
      <th>Name</th> 
      <th>Description</th> 
      <th class="disabled-sorting text-right">Actions</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Description</th> 
      <th class="text-right">Actions</th> 
     </tr> 
    </tfoot>--> 
</table> 

と、私は次のようにバインドしようとしています:

var resultA = JSON.parse(result); 


    $('#datatables').DataTable({ 
     "data":resultA, 
     "columns": [ 
      { "data": "name" }, 
      { "data": "description" } 
     ] 
    }); 

ヘッダーとフッターは現在コメント化されていますが、これを行うとデータがテーブルに表示されます。しかし、ヘッダーとフッターのコメントを外すと、ヘッダーとフッターだけのデータはありません。私は間違って何をしていますか?

また、datatablesは、私が認証しているAPIの仕方により、ajax呼び出しをサポートしていることを知っています。別の呼び出しでなければなりません。

私は絶対に何かをやっていることは分かっていますが、何ができますか?

UPDATE:私は[アクション]列に追加する必要のあるアクション:

<td class="text-right"> 
    <a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a> 
    <a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a> 
    <a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a> 
</td> 

答えて

0

あなたはオプションfixedHeader.headerとfixedHeader.footerを設定する必要があります。

fixedHeader: { 
     header: true, 
     footer: true 
    } 

はこれを試してみてください。

$('#datatables').DataTable({ 
    "data":resultA, 
    "columns": [ 
     { "data": "name" }, 
     { "data": "description" }, 
     { 
      "data":null 
      "defaultContent":"<a href='#' class='btn btn-simple btn-info btn-icon like'><i class='material-icons'>favorite</i></a> 
<a href='#' class='btn btn-simple btn-warning btn-icon edit'><i class='material-icons'>dvr</i></a> 
<a href='#' class='btn btn-simple btn-danger btn-icon remove'><i class='material-icons'>close</i></a>" 
     } 
    ], 
    fixedHeader: { 
     header: true, 
     footer: true 
    } 
}); 

詳細here

+0

これを行うとデータは表示されますが、まだヘッダーやフッターがありません。 – IWishIWasABarista

+0

列には2列しか指定しません。 HTMLでは3を参照してください。アクション列はどうですか? –

+0

ああ私の神。私は馬鹿だ!ありがとう!! – IWishIWasABarista

関連する問題