无法使用 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>

在这里你可以找到一个工作的fiddle