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

无法使用jQuery数据表，AJAX和JSON显示数据

1 个答案: