無法使用jQuery數據表，AJAX和JSON顯示數據

Question

我在使用AJAX在jQuery DataTable上顯示數據時遇到問題。 我正在使用來自datatables.net的庫。 我嘗試將JSON打包為許多不同的格式，但沒有任何效果。 我也弄亂了“列”部分，互換了“標題”和“數據”。 我目前只顯示一個事件，但是表格底部顯示了一些瘋狂的事件，例如4,000個條目。 這是我的代碼：

<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript">   
    $(document).ready(function () {
                $('#myTable').DataTable({
                    "processing": true,
                    "ajax": {
                        "url": "/api/EventsApi/GetAll",
                        "dataSrc": ""
                    },
                    columns: [
                        { title: "Title" },
                        { title: "Template" },
                        { title: "Capacity" },
                        { title: "Boarding Location" },
                        { title: "Status" },
                        { title: "Edit / Delete" }
                        //{ "data": "title" },
                        //{ "data": "eventTemplateID" },
                        //{ "data": "locomotive.capacity" },
                        //{ "data": "boardingLocationStart.city" },
                        //{ "data": "status" },
                        //{ "data": "status" }
                    ]
                });
    });

    <div class="title-content">@ViewBag.Title</div>
        <div id="dataTable">
            <table id="myTable" class="table table-hover" style="text-align: center;">
                <tbody id="tBody">
                    <!-- Table body data goes here -->
                </tbody>
            </table>
        </div>

這是從AJAX調用返回的JSON：

{"data":[{"tripEventID":1,"extraDetails":"this train has special details","eventName":"ZombieTrainEventName ","departureDate":"\/Date(1443715200000)\/","returnDate":"\/Date(1443718800000)\/","eventCapacityOveride":100,"eventTemplateID":3,"title":"The Zombie Train ","companyID":1,"description":"description of zombie train ride ","boardingClosed":30,"status":1,"boardingLocationStart":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationStartTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnFrom":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"boardingLocationReturnTo":{"boardingLocationID":3,"companyID":1,"name":"Skunk Train Willits","streetAddress":"Willits somewhere","city":"Some city","state":"CA","zip":"95713","description":"Desc field1"},"allowFlexableReturnDate":false,"product":[],"productBundle":[{"bundleID":10,"companyID":1,"displayName":" Pumkin Bundle copy Test","price":0.0100,"tax":0.0200,"productList":[]}],"locomotive":{"trainID":1,"companyID":1,"title":"Skunk_Steam ","type":1,"description":"Steam locomotive ","capacity":998,"status":0},"media":{"mediaID":1,"companyID":1,"hero":[],"gallery":[{"mediaDetailID":6,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":null,"url":null},{"mediaDetailID":7,"formatTypeID":2,"fileName":"testimage6.txt","order":1,"path":"path6","url":"url6"},{"mediaDetailID":8,"formatTypeID":2,"fileName":"testimage7.txt","order":1,"path":"path7","url":"url7"}],"inside":[{"mediaDetailID":1,"formatTypeID":1,"fileName":"testimage.txt","order":1,"path":null,"url":null},{"mediaDetailID":2,"formatTypeID":1,"fileName":"testimage2.txt","order":1,"path":null,"url":null},{"mediaDetailID":3,"formatTypeID":1,"fileName":"testimage3.txt","order":1,"path":null,"url":null}]},"duration":15,"isExclusive":false,"timeAtDestination":45,"isOneWay":false}]}

就像我說的那樣，我嘗試將JSON重新包裝為嵌套對象和數組，但沒有任何效果。 我是否缺少明顯的東西？ 任何幫助表示贊賞，謝謝！

Answer 1

您必須像這樣的json索引鍵一樣命名js中的列：

$(document).ready(function() {
    $('#myTable').DataTable( {
        "ajax":  "path/to/your/file.json",
        "columns": [
            { "data": "title" },
            { "data": "eventTemplateID" },
            { "data": "eventCapacityOveride" },
            { "data": "boardingLocationStart.streetAddress" },
            { "data": "status" },
            { "data": null }
        ],
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ]
    } );
} );

請注意，您可以使用columnDefs選項在表中定義自定義數據。

而不是像這樣編輯HTML：

 <table id="myTable" class="table table-hover" style="text-align: center;">
    <thead>
        <tr>
            <th>Title</th>
            <th>Template</th>
            <th>Capacity</th>
            <th>Boarding location</th>
            <th>Status</th>
            <th>Edit / Delete</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
           <th>Title</th>
            <th>Template</th>
            <th>Capacity</th>
            <th>Boarding location</th>
            <th>Status</th>
            <th>Edit / Delete</th>
        </tr>
    </tfoot>
</table>

在這里您可以找到一個工作的小提琴