2017-08-29 127 views
0

作爲我工作的一部分,我試圖重新設計我們的報表軟件並使表格看起來一致。該網站由許多頁面組成,幾乎都包含一個表格。如何將javascript表格轉換爲數據表格

似乎有兩種不同類型的表。該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 
    } 
}); 

});

第二個表類似乎是通過JavaScript創建的。當我從腳本下面的第一個表格添加腳本來製作這個表格時,它什麼也不做。你可以看到第二張表here的代碼。誰能告訴我如何將兩者結合起來?

非常感謝提前。

回答

0

您的第二張表沒有id屬性,並且沒有合適的結構。

jQuery的數據表要求該表具有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

非常感謝 - 這真的很有幫助!我將努力添加這些元素,並希望它能起作用!我接受它我只能從創建第二個表的腳本下面的第一個表中添加腳本? – EmmaJ