JSON HTML5 테이블에

Question

당신이 테이블에 행 행 색상의 특정 열을 기준으로 jQuery를 아약스에서 JSON 형식으로 데이터를 수신하고 경우 HTML5 테이블을 채우는 방법을

는 (부트 스트랩 4 개 CSS 스타일을 사용하십니까?)

예를 들어 나는이 같은 JSON 형식의 데이터 집합을받을 경우 :

{ "name":"John", "age":31, "city":"New York" }; 

열 도시는 완성 된 제품은 다음과 같이해야하므로 테이블 행이 녹색으로해야한다, 그래서 뉴욕입니다 :

<tr class="success"> 
    <td>John</td> 
    <td>31</td> 
    <td>New York</td> 
</tr> 

jQuery에서 상당히 새로운 사람이라면 어떻게 달성 할 수 있는지 안내 할 수 있습니까?

나는 순간에 datatables 라이브러리를 사용하고 내가 무슨 짓을 한 것은있어이 :

현재 HTML5 코드는

<table class="table table-hover thead-inverse table-bordered table-sortable"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>City</th> 
    </tr> 
    </thead> 
</table> 

노호 표시되지만

function btnSearch_Click() { 
    $.ajax({ 
    type: "POST", 
    url: "index.aspx/GetJobs", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(data) { 
     $('.table-sortable').dataTable({ 
     destroy: true, 
     data: data, 
     columns: [ 
     { 
      'd': 'Name' 
     }, 
     { 
      'd': 'Age' 
     }, 
     { 
      'd': 'City' 
     }] 
     }); 
    } 
    }); 
}; 

나는 버튼 데이터 행을 클릭하지 않을 때 브라우저에서 반환합니다 (SQL Server는 데이터를 반환합니다). 내가 언급 또한으로 나는

Answer 1

이 시도 ...

사전에 당신의 도움을 주셔서 감사합니다 ... 특정 데이터가 연속적으로 반환되는 경우 내가 그것을 색상을 필요 달성하는 방법을 모른다 :

당신이 플러그인 자체가 기능이 볼 수 있듯이

$(document).ready(function() { 
    $('.table-sortable').dataTable({ 
     "ajax": { 
      "url": "index.aspx/GetJobs", 
      "type": "POST" 
     }, 
     "columns": [ 
      { "data": "name" }, 
      { "data": "age" }, 
      { "data": "city" }, 
     ] 
    }); 
}); 

:

$('.table-sortable').dataTable({ 
    destroy: true, 
    data: data, 
    columns: [ 
    { "data": "name" }, 
    { "data": "age" }, 
    { "data": "city" }, 
    ] 
}); 

Answer 2

ajax와 DataTables을 사용하기 위해 당신은 일반적으로 이런 일이 ajax을 사용하십시오.

기본적으로 서버에서 반환되는 데이터에는 렌더링 될 요소가 포함 된 data 속성이 있어야합니다.

"ajax": { 
      "url": "index.aspx/GetJobs", 
      "type": "POST" 
      "dataSrc": "" 
}, 

이 그러나 columns 선언에 data 이름을 변경하지 않습니다 당신이 일반 모음을 사용하는 경우 실제로 ajax의 dataSrc (reference) 소품을 사용하여이를에서 지정할 수 있으며, 다른 이름으로 설정하거나 제거 할 수 있습니다 그러니 거기서 바꾸지 마십시오.

official documentation에서 허용되는 형식 및 예제를 볼 수 있습니다.

이제 행 스타일에 관한 질문과 관련하여 많은 콜백과 선언을 통해이를 구현할 수 있습니다.

"createdRow": function(row, data, dataIndex) { 
    if (parseInt(data[1]) >= 18) { 
    $(row).addClass('success'); 
    } 
} 

그래서이 경우 현재 행의 나이 (0-시작 인덱스를 기반으로 두 번째 열)가 18 이상이면이 원하는 클래스를 추가합니다 : 개인적으로 createdRow 콜백 ( reference)를 사용하여 선호합니다.

---

나는이 여전히 그래서 우리는 "진짜 같은"상황에서 디버깅을 시도 할 수있는 작업 jsfiddle을 시도 할 수있는 문제가있는 경우, 귀하의 문제를 해결하는 데 도움이되기를 바랍니다.

Answer 3

이 그냥 아이디어를 얻을 것입니다, 나는 이미 작동하지 않습니다 시도 버튼 클릭 코드를

$("button").click(function(){ 
    var obj = JSON.parse('[{ "name":"John", "age":30, "city":"New York"},{ "name":"John1", "age":30, "city":"New York"}]'); 
    var t = $('#example'); 

    for (i = 0; i < obj.length; i++) // iterate data from json 
    { 
    var name = obj[i].name; 
    var age = obj[i].age; 
    var classStyle = 'yellow' 
    if(name=='John') 
    { 
     classStyle = 'green'; 
    } 
     $('#example').append('<tr style=background:'+classStyle+'><td>'+name+'</td><td>'+age+'</td></tr>'); 

    } 

});