我正在使用虚拟数据创建一些模型。我必须使用.json
在jquery datatable
中显示一些我已存储在ajax
文件中的数据。我已浏览Datatables site
中的examples,但数据未显示。可能是它没有正确读取数据或根本没有读取数据。尝试了很多变通方法,但似乎没有任何工作。
文件夹结构如下:
我的HTML代码位于文件backlog.html
中。它是这样的:
<table id="backlogTable" class="grid">
<thead>
<tr>
<th nowrap="nowrap" width="230px">Hotel Name One</th>
<th nowrap="nowrap" width="110px">Hotel Price One</th>
<th nowrap="nowrap" width="230px">Hotel Name Two</th>
<th nowrap="nowrap" width="110px">Hotel Price Two</th>
<th nowrap="nowrap" width="230px">Hotel Name Three</th>
<th nowrap="nowrap" width="110px">Hotel Price Three</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
该脚本仅在html文件中编写。 javascript代码是:
$(document).ready(function() {
$("#loading").ajaxStart(function () {
$(this).show();
});
$("#loading").ajaxStop(function () {
$(this).hide();
});
$.ajax(
{
type : "GET",
url : "resources/LasVegas.json",
contentType : 'application/json',
dataType : 'json',
success : function(json)
{
oTable = $("#backlogTable").dataTable({
"aaData" : json.aaData,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"bJQueryUI" : true,
"bRetrieve" : true,
"bPaginate" : true,
"bStateSave" : true,
"scrollY" : 200,
"scrollCollapse" : true,
"jQueryUI" : true,
"bSort" : true,
"iDisplayLength" : 10,
"oLanguage": {
"sProcessing": "<img src='resources/images/loader.gif'/>",
"sEmptyTable": "No records found."
},
"aoColumns": [
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"}
],
"error": function() {
alert("Failed to load Data");
}
});
}
}
);
});
当我尝试在浏览器中打开HTML文件时,只显示表格标题而不显示其他内容。没有数据,甚至没有空表消息。当我检查浏览器控制台时,它说
XMLHttpRequest cannot load file:///Users/vshukla/Pictures/Mockups/html/resources/LasVegas.json. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
以下是LasVegas.json
数据:
{
"aaData": [
[
"Wynn Las Vegas",
"$151",
"Caesers Las Vegas",
"$239.00",
"Flamingo Las Vegas",
"$151"
],
[
"The Palazzo",
"$159",
"The Palazzo Resort Hotel Casino",
"$249.00",
"The Balazio Resort",
"$159"
],
[
"Encore at Wynn Las Vegas",
"$151",
"Wynn Las Vegas",
"$359.00",
"Hotel Las Vegas",
"$151"
],
[
"Caesars Palace",
"$229",
"Flamingo Bay",
"$219.00",
"Caesars Palace & Resort",
"$229"
]
]
}
请帮忙。