Как я могу загрузить локальную переменную JSON с помощью JQuery Datatable

Question

У меня есть локальный набор данных JSON. Я хочу использовать jquery datatable плагин для его отображения. я последовал примеру в 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>