DATATABLEヘッダわかりましたが、APIにDataTableの連結体 - データ

Question

これらを返さないが、ブラウザの私のエラーです：

は、リソースの読み込みに失敗しました：サーバーは、404の状態（見つかりません）

jQueryを使って答えました.datatables.js：3406キャッチされない例外TypeError：未定義

のプロパティ '長さ' を読み込めませんここでJSONレスポンスは、直接です：

ここでページのソースです：

@model IEnumerable<SE01.Models.BMFixture> 
 

 
@{ 
 
    ViewBag.Title = "Fixtures"; 
 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
 
} 
 
<h2>Fixtures</h2> 
 

 
<table id="bmfixtures" class="table table-bordered table-hover"> 
 
    <thead> 
 
     <tr> 
 

 
      <th>Market</th> 
 
      <th>Market</th> 
 
      <th>Selection</th> 
 
      <th>Bookmaker</th> 
 
      <th>Odds</th> 
 
      <th>Delete</th> 
 

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

 

 
@section scripts 
 
{ 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#bmfixtures").DataTable({ 
 
       ajax: { 
 
        url: "/Api/BMFixtures", 
 
        datasrc: "" 
 
       }, 
 
       columns: [ 
 
        { 
 
         data: "marketname", 
 
         render: function(data, type, bmfixture) { 
 
          return "<a href='/bmfixtures/edit/" + bmfixture.Id + "'>" + bmfixture.marketname + "</a>"; 
 
         } 
 
        }, 
 
        { 
 
         data: "marketname" 
 
        }, 
 
        { 
 
         data: "selectionname" 
 
        }, 
 
        { 
 
         data: "bookmakername" 
 
        }, 
 
        { 
 
         data: "bookmakerodds" 
 
        }, 
 
        { 
 
         data: "id", 
 
         render: function(data) { 
 
          return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>"; 
 
         } 
 
        } 
 

 
       ] 
 
      }); 
 

 
      $("#bmfixtures").on("click", " .js-delete", function() { 
 
       var button = $(this); 
 

 
       if (confirm("Are you sure you want to delete this fixture?")) { 
 
        $.ajax({ 
 
         url: "/api/bmfixtures/" + button.attr("data-bmfixture-id"), 
 
         method: "DELETE", 
 
         success: function() { 
 
          button.parents("tr").remove(); 
 
         } 
 
        }); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
}

Answer 1

こんにちは、しかし、私はあなたのデータを使用していないよ、私は簡単なデモを試してみましたが、それが正常に動作しているように見えますJSON形式の問題かもしれません。私は違っやっただけのものは、単一引用符を使用して、完全にURLを修飾するある - ので（例えばurl: "http://localhost:60241/api/bmfixtures"）

例を試してみてください（などのリンクでデータを変更しただけので、あなたのアイデアを得る）：

@{ 
    ViewBag.Title = "Fixtures"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<h2>Fixtures</h2> 

<table id="bmfixtures" class="table table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>id</th> 
      <th>type</th> 
      <th>text</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

@section scripts 
{ 
    <script> 

     $("#bmfixtures").DataTable({ 
      ajax: { 
       // Replace below line with: url: "http://localhost:60241/api/bmfixtures", (in your version) 
       url: "http://api.scb.se/OV0104/v1/doris/en/ssd", 
       dataSrc: '' 
      }, 
      columns: [ 
       { 
        data: 'id', 
        render: function (data, type, bmfixture) { 
         return "<a href='/bmfixtures/edit/" + bmfixture.id + "'>" + bmfixture.id + "</a>"; 
        } 
       }, 
       { data: 'id' }, 
       { data: 'type' }, 
       { data: 'text' }, 
       { 
        data: 'id', 
        render: function (data) { 
         return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>"; 
        } 
       } 
      ] 
     }); 
    </script> 
}