我如何使用jquery数据表加载本地JSON变量

Question

我有一个本地JSON数据集。我想使用jquery数据表插件来显示它。我按照https://www.datatables.net/examples/data_sources/ajax.html中的示例进行操作，但无法正常工作，我总是收到以下消息，请参见图像

这是我使用的代码

$(document).ready(function () {
    var table_data = [
        ["Tiger Nixon", "System Architect", "$3,120", "2011/04/25"],
        ["Garrett Winters", "Director", "$8,422", "2011/07/25"]
    ];

    var table = $('#example').DataTable({
        data: table_data
    });
});

 <div class="col-md-12">
        <table id="example" class="table table-bordered" style="width:100%">
            <thead class="head">
                <tr>
                    <th class="text-center">Opérations</th>
                    
                    <th colspan="8" class="text-center not-fixed">Commissions directes</th>
                    <th colspan="7" class="text-center">Commissions sur incitation</th>
                    <th colspan="9" class="text-center">Paramètres autres</th>
                </tr>
             
                
            </thead>


            <tbody>
                
            </tbody>
        </table>
    </div>

你能帮我吗

Answer 1

您的json结构中有一些错误。这就是为什么它不起作用。在您更正它之后，它将可以正常工作。

并使用JSON.parse()方法创建带有json字符串的json对象。

$(document).ready(function () {

   var table_data = JSON.parse('{"data": [["Tiger Nixon","System Architect","2011/04/25","$320,800"],["Garrett Winters","Accountant","2011/07/25","$170,750"]]}');

    var table = $('#example').DataTable({
     "data": table_data.data,
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>


<div class="col-md-12">
        <table id="example" class="table table-bordered" style="width:100%">
            <thead class="head">
                <tr>
                    <th class="text-center">Opérations</th>
                    <th class="text-center not-fixed">Commissions directes</th>
                    <th class="text-center">Commissions sur incitation</th>
                    <th class="text-center">Paramètres autres</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
</div>