DataTable이 AJAX 호출에서받은 JSON 데이터를 기반으로 렌더링하지 않습니다.

테이블의 데이터를 jQuery DataTable에로드하려고합니다. 이를 위해 나는 코드 아래 적용한 :DataTable이 AJAX 호출에서받은 JSON 데이터를 기반으로 렌더링하지 않습니다.

HTML

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
</head> 
<body> 
    <div style="width:90%;margin:0 auto"> 
     <table id="mydatatable"> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email Id</th> 
       <th>City</th> 
       <th>Country</th> 
      </tr> 
     </table> 
    </div> 
    <script src="~/scripts/jquery-3.2.1.min.js"></script> 
    <script src="~/scripts/jquery.validate.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
    <script src="~/scripts/jquery-ui-1.12.1.min.js"></script> 
    <script> 
     $document.ready(function() { 
      var oTable = $("mydatatable").DataTable({ 
       "ajax": { 
        url: "/Home/GetEmployees", 
        type: "get", 
        database: "json" 
       }, 
       "columns": [ 
        { "data": "FirstName", "autowidth": true }, 
        { "data": "LastName", "autowidth": true }, 
        { "data": "EmailId", "autowidth": true }, 
        { "data": "City", "autowidth": true }, 
        { "data": "Country", "autowidth": true } 
       ] 
      }); 
     }); 
    </script> 
</body> 
</html>

컨트롤러 내가 "// 홈/GetEmployees"에서 발생하고 있습니다

using MVC_CRUD.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 


namespace MVC_CRUD.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     public ActionResult GetEmployees() { 
      using (MvcCRUDDBEntities dc = new MvcCRUDDBEntities()) { 
       var employees = dc.Employees.OrderBy(a => a.FirstName).ToList(); 
       return Json(new { data = employees }, JsonRequestBehavior.AllowGet); 
      } 
     } 
    } 
}

데이터입니다 :

{"data":[{"EmployeeId":4,"FirstName":"Ankit","LastName":"Agarwal","EmailId":"[email protected]","City":"Pune ","Country":"India  "},{"EmployeeId":2,"FirstName":"Niraj","LastName":"Desai","EmailId":"[email protected]","City":"Bilimora ","Country":"India  "},{"EmployeeId":1,"FirstName":"Pratik","LastName":"Soni","EmailId":"[email protected]","City":"Valsad ","Country":"India  "},{"EmployeeId":3,"FirstName":"Shezad","LastName":"Khan","EmailId":"[email protected]","City":"Manglore ","Country":"India  "}]}

하지만 whe n 응용 프로그램을 실행하면 DataTable에 데이터가 없습니다.

여기서 원하는 데이터는 응용 프로그램 시작시 DataTable에로드해야합니다. StackOverflow에서 사용할 수있는 기존 솔루션을 시도했지만 그 중 아무도 나를 도왔습니다.

업데이트 : 디버깅하는 동안 HomeController.cs 파일에서 "GetEmployees"메서드가 호출되는 이벤트가 아닌 것으로 나타났습니다. 당신이 id="mydatatable"와 table을 가지고 있기 때문에

var oTable = $("mydatatable").DataTable

var oTable = $("#mydatatable").DataTable

에 :

출처

2017-11-07 Pratik Soni

당신의 JS 테이블 초기화는'$ ("#의 mydatatable")해야한다 대신 $'의 DataTable' ("mydatatable") DataTable' – i3lai3la

i3lai3la @ :.. 내 코드를 업데이트하여 그것을 시도. 하지만 여전히 작동하지 않습니다. –

답변에 따라 질문의 코드를 변경하지 마십시오 (대답이 무효화됩니다) –

은 아래 편집 코드가 필요합니다. jQuery에서이 요소를 id으로 가져 오려면 # 앞에 id을 사용해야합니다.

업데이트

클라이언트 측 당신은 서버에서 데이터를 얻을 옵션 아래에 추가 할 필요가

oTable = $('#mydatatable').dataTable({ 
     "bServerSide": true, 
     ... 
    });

서버 측

return Json(new { 
data = employees.Select(e => new { 
    FirstName = e.FirstName, 
    LastName = e.LastName, 
    StatusLU = e.StatusLU, 
    EmailId = e.EmailId, 
    City = e.City, 
    Country = e.Country 
}) 
}, JsonRequestBehavior.AllowGet);

출처

2017-11-07 07:58:33

코드를 업데이트하여 시도해 보았습니다. 하지만 여전히 작동하지 않습니다. 어쨌든, 내 질문에이 제안을 기반으로 내 코드를 업데이트하고 있습니다. –

@PratikSoni 나는 나의 대답을 편집했다. 나는 너를 도왔다. –

아직 작동하지 않습니다! –

한번보십시오 :

var draw = Request.Form.GetValues("draw").FirstOrDefault(); 

return Json(new 
     { draw = draw, 
     recordsFiltered = recordsTotal, 
     recordsTotal = recordsTotal, //1000 
     data = employees 
     }, JsonRequestBehavior.AllowGet);

업데이트 : 난 당신이 속성에서 데이터베이스를 사용하고 발견, 잘못된 보인다.

var oTable = $("#mydatatable").DataTable({ 

       "processing": true, //update 
       "serverSide": true, //update 

       "ajax": { 
        url: "/Home/GetEmployees", 
        type: "get", 
        datatype: "json" //review this 
       }, 
       "columns": [ 
        { "data": "FirstName", "name": "FirstName", "autowidth": true }, 
        { "data": "LastName", "name": "LastName", "autowidth": true }, 
        { "data": "EmailId", "name": "EmailId", "autowidth": true }, 
        { "data": "City", "name": "City", "autowidth": true }, 
        { "data": "Country", "name": "Country", "autowidth": true } 
       ] 
      });

출처

2017-11-07 09:13:07 Saurin

안녕하세요, 위의 답변에서 공유 한 것을 시도했지만 작동하지 않습니다. 그것은 여전히 나에게 같은 결과를 준다. 그리고 귀하의 제안에 대한 제안 즉, 데이터 유형 "json", 나는 그것을 교차 체크하고 예상대로입니다. –

다음을 참조하십시오. https://stackoverflow.com/questions/30908906/server-side-pagination-with-jquery-data-tables-plugin/36863409#36863409 – Saurin

아니요, 링크 된 답변이 도움이되지 않습니다. –

DataTable이 AJAX 호출에서받은 JSON 데이터를 기반으로 렌더링하지 않습니다.

답변

관련 문제