jquery-3.5.1.js:4055 错误数据表无法读取未定义的属性“aDataSort”

Question

早上好，我在引导模式中使用 Datatables 时遇到了这个小问题，该模式应该显示 SQLServer 查询（只是一个选择），它需要能够打印为 Excel 文件或其他格式，但我收到了控制台中的错误“DataTables Cannot read property 'aDataSort' of undefined” 在该错误前面显示“jquery-3.5.1.js:4055”，所以我认为这应该是问题所在。

由于需要将结果导出为格式，所以找到了这个https://datatables.net/extensions/buttons/examples/initialisation/export.html

我正在阅读不同的网站和这里，看起来问题是如何定义依赖项，但我尝试了不同的方法但它不起作用，所以我不确定可能是什么问题......

这些是我的依赖项：

        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../../bootstrap-4.5.0-dist/css/bootstrap.css" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="js/functions.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script src="js/datatables.js"></script>
        <script src="js/Buttons-1.6.2/js/buttons.bootstrap4.js"></script>
        <script src="js/DataTables-1.10.21/js/jquery.dataTables.js"></script>
        <script src="js/JSZip-2.5.0/jszip.js"></script>
        <script src="js/pdfmake-0.1.36/pdfmake.js"></script>
        <script src="js/pdfmake-0.1.36/vfs_fonts.js"></script>

这是模态框内的表格

 <table id="table_to_show"></table>

这是应显示表格的同一文件中的函数。

<script type="text/javascript">
        $(document).ready(function() {
    $('#table_to_show').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
        
    } );
} );
</script>

这是为 SELECT 生成的表本身：

$table="";

if ($result) {
    $data = sqlsrv_has_rows($result);
    if ($data === true)  {
        while ($data = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)){

            $table=$table.'<tr>
            <td>'.$data['ID'].'</td>
            <td>'.$data['NAME'].'</td>
            <td>'.$data['LNAME'].'</td>
            <td>'.$data['number1'].'</td>
            <td>'.$data['number2'].'</td>
            <td>'.$data['MOBILE'].'</td>
            <td>'.$data['MRETIR'].'</td>
            </tr>';
        }
    }
}
    sqlsrv_close($conn);

    echo '<table class="table table-stripped">
    <thead>
    <th>Id</th>
    <th>Name</th>
    <th>Last Name</th>
    <th>Number 1</th>
    <th>Number 2</th>
    <th>Mobile #</th>
    <th>Retired?</th>
    </thead>
    <tbody>'.$table.'
    </tbody>';
    

这就是我所拥有的...任何人都可以帮助我解决这个问题吗？我已经尝试解决了 2 天，也许 3...

提前致谢

Answer 1

尝试将 json_encode 用于您的 PHP 输出 这是我的一些 MYSQLI 示例

  $sqlSelect = "SELECT * FROM table";
  $result = mysqli_query($conn, $sqlSelect);
        $someArray = [];
  if (mysqli_num_rows($result) > 0) {

while ($row = mysqli_fetch_array($result)) {
     array_push($someArray, [
  'ID'   => $row['ID'],
  'NAME' => $row['NAME'],
   'LNAME'   => $row['LNAME'],
  'ETC' => $row['ETC']
]);
}
}
 
 $json = json_encode($someArray);
echo ($json);

然后是 JQuery

 $.ajax({
            url: 'php_file.php',
            type: "GET",
            success: function(res){
                var obj = JSON.parse(res);
                console.log(obj);
                $('#table_to_show').DataTable({
                    dom: 'Bfrtip',
                    destroy: true,
                    processing: true,
                    "data"  : obj,  
                "columnDefs": [{
                "defaultContent": "-",
                "targets": "_all"
                    }], 
            buttons : [ 'copy', 'csv', 'excel', 'pdf', 'print' ],                   
                    "columns": [    
                        { "data": "ID" },
                        { "data": "NAME" },
                        { "data": "LNAME" },
                        { "data": "ETC" }
                    ]  
                 })

;
                    
                },
                error: function(xhr){
                    alert("Error Occured!", "error")
                }
            }); 
        
    
HTML

    <table id="table_to_show" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                 <th>LNAME</th>
                <th>ETC</th>   
            </tr>
        </thead>
    </table>

数据表按钮 CDN

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js