带有json数据源的ajax的jQuery数据表

Question

我正在尝试使用带有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>

Answer 1

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

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