Javascript 无法使用jQuery datatables、AJAX和JSON显示数据

我在使用AJAX在jQuery数据表上显示数据时遇到问题。我正在使用datatables.net中的库。我尝试过将JSON打包成许多不同的格式，但没有任何效果。我还搞乱了“columns”部分，将“title”和“data”互换。我现在只有一个事件要显示，但表的底部显示了一些疯狂的东西，比如4000个条目。这是我的密码：

<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>

---

正如我所说，我尝试将JSON重新打包为嵌套对象和数组，但没有任何效果。我错过了什么明显的东西吗？非常感谢您的帮助，谢谢

您必须在js中命名列，就像json索引键一样，如下所示：

$(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>"
        } ]
    } );
} );

 <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上工作，但由于某些原因，我仍然无法让我的代码工作。唯一填充的是最后一列中的所有“单击！”按钮。加载页面大约需要10秒钟，然后它会发出警报“DataTables警告：table id=mytable-为第0行第0列请求的未知参数“title”。有关此错误的详细信息，请参阅“-Thanksit”，这意味着脚本在json中找不到要绑定到第0列的title键。您确定您的代码正确加载了json吗？注意chrome控制台是否抛出了一些错误（或者firebug，如果您愿意的话）。你在网络服务器上吗？本地使用是行不通的。传递给dtatables的整个json都是有效的json？或者，如果要从外部url加载json，则必须配置托管json的服务器以允许跨源访问controlOk。我想问题可能是返回了一个字符串，里面有JSON。也许如果我能将它反向字符串化，去掉使它成为字符串的引号。我将不得不玩它以后“你必须命名列”。这一点怎么强调也不过分。

 <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>