帶有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"
     ]
  ]
}