时间戳

首页 > 解决方案 > Uncaught TypeError: $(...).DataTable is not a function when convert table to datatable

jquery - Uncaught TypeError: $(...).DataTable is not a function when convert table to datatable

问题描述

我有一个使用 AJAX 从 CSV 文件创建的表，所以我只想将表转换为数据表，使用多列过滤器甚至单个过滤器都可以。将 CSV 转换为 HTML 表格工作正常，但无法将 Table 转换为 Datatable 。

谁能帮我 。下面是我的代码。

 Last refresh : <div id="time">
 <?php echo date('H:i:s');?></div><div id="employee_table"> </div>
<script>
                            $(document).ready(function(){
                                $.ajax({
                                    url:"FILES/UILatestReport.csv",
                                    dataType:"text",
                                    success:function(data)
                                    {
                                        var employee_data = data.split(/\r?\n|\r/);
                                        var table_data = '<table  id="myTable" class="table table-bordered table-striped">';
                                        for(var count = 0; count<employee_data.length; count++){
                                            var cell_data = employee_data[count].split(",");
                                            table_data += '<tr>';
                                            for(var cell_count=0; cell_count<cell_data.length; cell_count++){
                                                if(count === 0){
                                                    table_data += '<th class="headingvalues">'+cell_data[cell_count]+'</th>';
                                                }else{
                                                    if(cell_data[cell_count] == "Error"){
                                                        table_data += '<td><span class="badge badge-danger">'+cell_data[cell_count]+'</span></td>';
                                                    }else if(cell_data[cell_count] == "Down"){
                                                        table_data += '<td><span class="badge badge-danger">'+cell_data[cell_count]+'</span></td>';
                                                    }else{
                                                        table_data += '<td>'+cell_data[cell_count]+'</td>';
                                                    }
                                                }
                                            }
                                            table_data += '</tr>';
                                        }
                                        table_data += '</table>';
                                        $('#employee_table').html(table_data);
                                    }
                                });
    
                                $('#myTable').DataTable();
                            });
                            </script>

我在顶部包含了用于数据表的 javasript 和 CSS：

 <script type="text/javascript"  src=" https://code.jquery.com/jquery-3.5.1.js"></script>
 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js" ></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

标签： jquerydatatable

解决方案

在 ajax 调用从服务器返回答案之前初始化表。由于您在成功块中创建了 HTML，因此您尝试初始化 DOM 中不存在的元素。移动

$('#myTable').DataTable();

进入你的成功块

推荐阅读