带有json数据源ajax的jquery数据表答案

【问题标题】：jquery datatable with ajax of json datasource带有json数据源ajax的jquery数据表
【发布时间】：2015-04-21 05:36:49
【问题描述】：

我正在尝试使用带有 AJAX 的 jquery 数据表从 ASP.NET MVC 的实体框架加载数据。不知何故，数据没有显示在表格中。需要您的帮助以了解我哪里出错了。

当我在浏览器中执行 json 时，它会返回以下字符串

[{"Region1":"South2","RegionId":1},
{"Region1":"Ahmedabad","RegionId":2},
{"Region1":"Bangalore","RegionId":3},
{"Region1":"Bhubaneswar","RegionId":4},
{"Region1":"Bilshpur","RegionId":5}]

json的代码是

public class RegionJSONController : ApiController
{
    static azure_sociodataEntities1 ctx = new azure_sociodataEntities1();

    // GET: api/RegionJSON
    public dynamic Get()
    {
            return ctx.Regions.Include("Tags").Select(i => new { i.Region1, i.RegionId }).Take(5);
    } }

html页面是

            <table id="regionsdt" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Region ID</th>
                            <th>Region</th>
                        </tr>

                    </thead>
                    <tbody></tbody>
                </table>

<<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>


    <script>
    function InitOverviewDataTable() {
        oOverviewTable = $('#regionsdt').dataTable(
        {
            "bPaginate": false,
            "bJQueryUI": true,  // ThemeRoller-stöd
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": true,
            "bAutoWidth": true,
            "bProcessing": false,
            "iDisplayLength": 10,
            "sAjaxSource": 'http://localhost:44379/api/RegionJSON'
        });
    }

    function RefreshTable(tableId, urlData) {
        $.getJSON(urlData, null, function (json) {
            table = $(tableId).dataTable();
            oSettings = table.fnSettings();

            table.fnClearTable(this);

            for (var i = 0; i < json.aaData.length; i++) {
                table.oApi._fnAddData(oSettings, json.aaData[i]);
            }

            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
            table.fnDraw();
        });
    }

    function AutoReload() {
        RefreshTable('#regionsdt', 'http://localhost:44379/api/RegionJSON');

        setTimeout(function () { AutoReload(); }, 30000);
    }

    $(document).ready(function () {
        InitOverviewDataTable();
        setTimeout(function () { AutoReload(); }, 30000);
    });


</script>

【问题讨论】：

标签： javascript jquery ajax json asp.net-mvc-3

【解决方案1】：

我认为您发送的 json 对象格式错误。基于https://datatables.net/examples/data_sources/ajax.html 的正确格式是这样的：

{
  "data": [
     [
      "south 2","1"
     ],
     [
      "Ahmedabad","2"
     ],
     [
      "Bangalore","3"
     ],
     [
      "Bhubaneswar","4"
     ],
     [
      "Bilshpur","5"
     ]
  ]
}

【讨论】：