.Datatable不是一个函数

时间:2016-09-07 11:40:31

标签: javascript jquery datetime datatable

我试试这个表格功能 https://datatables.net/examples/basic_init/scroll_xy.html

我有下拉和日期选择器,所以我添加表和日期时间选择器链接的链接然后我添加表,我也使用脚本,但当我选择日期时间选择器,然后日历不显示然后当我检查控制台这显示错误< / p>

我尝试在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 个答案:

答案 0 :(得分:0)

您正在使用jquery文件的多个引用。对于任何插件来说,顺序更重要。 还要尽量避免在脚本引用之前编写协议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>

答案 1 :(得分: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",
                    {