2016-09-07 59 views
0

我試試這個表功能 https://datatables.net/examples/basic_init/scroll_xy.html.Datatable不是函數

我有下拉和日期選擇器,所以我添加鏈接表和日期時間選擇器鏈接然後我添加表和還我使用腳本這一點,但我選擇日期時間選擇器則日曆不會再顯示當我檢查控制檯本次車展錯誤

我嘗試導出表數據在Excel

WebForm1.aspx:34 Uncaught TypeError: $(...).Datatable is not a function 

CODE

<%--for tabledata--%> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 


     <link href="Styles/stylechart.css" rel="stylesheet" /> 
     <!--for date--%>--> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" /> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 

    <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#tabledata").Datatable({ 
        dom: 'Bfrtip', 
        buttons: [ 
         'excelHtml5' 

        ] 
       }); 
      }); 

    </script> 

     <table id="tabledata" cellspacing="0" class="display nowrap inner_table"> 

      </table> 

更新:

 success: function (result) { 
        var final = JSON.parse(result.d).response; 
        console.log(JSON.parse(result.d).response); 
        $("#tabledata").empty(); 
        if (final.length > 0) { 
         $("#tabledata").append(
    "<thead><tr><th>RegNo</th></tr></thead>"); 
         for (var i = 0; i < final.length; i++) { 

          if (final[i] !== null) { 
           $("#tabledata").append("<tbody><tr><td>" +      
           final[i][0] + "</td> </tr></tbody>"); 

          } 
         }      
        } 
+2

'DataTable' =='Datatable' –

+0

下面是一個[活生生的例子](https://jsfiddle.net/sbr8efgw) – Peacefull

+0

@Peacefull這是不鏈接? – user6628729

回答

0

你正在使用jQuery file.Also秩序的多次引用更重要的是對任何插件才能正常工作。 也嘗試避免在腳本引用之前編寫協議http或https,只需添加簡單的//並且它會自動檢測您的應用程序在哪個協議上工作並根據它加載參考文件。

將參考部分更改爲下面給出的腳本。

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 
<link href="Styles/stylechart.css" rel="stylesheet" /> 
<!--for date--%>--> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" /> 

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#tabledata").Datatable({ 
       dom: 'Bfrtip', 
       buttons: [ 
        'excelHtml5' 

       ] 
      }); 
     }); 

</script> 

<table id="tabledata" cellspacing="0" class="display nowrap inner_table"> 
<thead> 
<tr> 
<th>Column1</th> 
<th>Column2</th> 
<th>Column3</th> 
<th>Column4</th> 
</tr> 
</thead> 
</table> 
+0

當我嘗試你的解決方案這個顯示錯誤控制檯.. jquery.dataTables.min.js:65 Uncaught TypeError:無法讀取未定義的屬性'aDataSort' – user6628729

+0

因爲您需要向表中添加數據。你使用Json數據? – Peacefull

+0

所以你原來的錯誤已經消失了,它有jquery的問題,根本無法創建數據表。現在你有配置錯誤。 – iSensical

0

試試這個:

  $('#tabledata').DataTable({ 
      sDom: 'TC<"clear">lfrtip', 
      "iDisplayLength": 10, 
      "oTableTools": { 
     ***add*** "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls_pdf.swf", 
       "aButtons": [ 
        "copy", 
        "csv", 
        "xls", 
        { 
+0

這不顯示覆制csv和xls按鈕 – user6628729

相關問題