2017-08-29 9 views
0

私の仕事の一環として、私たちのレポートソフトウェアを再設計し、テーブルを一貫して見せるようにしています。サイトは多くのページで構成されており、ほとんどすべてが表を含んでいます。JavaScriptテーブルをデータテーブルにする方法

テーブルには2つの異なるタイプがあるようです。 firstは、表が良く見えるように次のコードを使用して、HTMLのデータテーブルである:

<table style="width:100%;clear:left;" id="orderlist"> 
    bla bla bla 
</table> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#orderlist').dataTable({ 
    "aaSorting": [[ 1, "desc" ]], 
    "bJQueryUI": true, 
    "bPaginate": true, 
    "bLengthChange": true, 
    "bFilter": true, 
    "bInfo": true, 
    "paging": true, 
    "iDisplayLength": 25, 
    "sDom": '<"H"pf>t<"F"lirp>', 
    "sPaginationType": "full_numbers", 
    "oLanguage": { 
     "sProcessing": language.fetching_data, 
     "sSearch": language.search, 
     "oPaginate": { 
      "sFirst": language.page_nav_first, 
      "sLast":  language.page_nav_last, 
      "sNext":  language.page_nav_next, 
      "sPrevious": language.page_nav_prev 
     }, 
     "sEmptyTable": "<p>" + language.no_data_table + "</p>", 
     "sInfo":   language.datatable_show_entries, 
     "sInfoEmpty": language.datatable_empty_entries 
    } 
}); 

});

第2のテーブルタイプは、javascriptで作成されたようです。このテーブルを作るためにスクリプトの下の最初のテーブルからスクリプトを追加すると、何もしません。 2番目のテーブルhereからコードを見ることができます。誰も私がどのように2つを組み合わせることができるか教えてください?

事前に感謝します。

答えて

0

2番目のテーブルにはidという属性がなく、適切な構造がありません。

のjQueryのDataTableには、例えば、theadtbodyの要素を持っているテーブルを必要とします。

<table id="table_id" class="display"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
     </tr> 
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
     </tr> 
    </tbody> 
</table> 

詳細についてはofficial documentationを参照してください。

+0

ありがとうございます - 本当に役に立ちます!私はこれらの要素を追加してうまくいけば動作します!私はそれを取る私はちょうど2番目のテーブルを作成するスクリプトの下の最初のテーブルからスクリプトを追加することができますか? – EmmaJ

関連する問題