2017-08-29 65 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