데이터 테이블 헤더 좋아하지만 몸 API에 데이터 테이블 연결 - 반환하지 않는 데이터

Question

이 내 오류가 브라우저에 있습니다

자원을로드하지 못했습니다 : 서버 (찾을 수 없음) (404)

JQuery와 상태로 응답 .datatables.js : 3406 catch되지 않은 형식 오류 :

: 여기

정의되지 않은

의 특성 '길이'를 읽을 수 없습니다 것은 직접 JSON 응답입니다

여기 페이지의 소스입니다 :

Answer 1

@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> 
 
}

안녕 내가 간단한 데모를 시도하고 그러나 나는 당신의 데이터를 사용하지 않는, 잘 작동 것으로 보인다, 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> 
}