Jquery Datatable不从json文件中读取ajax数据

时间:2015-01-21 08:40:34

标签: javascript jquery ajax json jquery-datatables

我正在使用虚拟数据创建一些模型。我必须使用.jsonjquery datatable中显示一些我已存储在ajax文件中的数据。我已浏览Datatables site中的examples,但数据未显示。可能是它没有正确读取数据或根本没有读取数据。尝试了很多变通方法,但似乎没有任何工作。

文件夹结构如下:

enter image description here

我的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"
                    ]
    ]
    }

请帮忙。

0 个答案:

没有答案