2014-01-21 4 views
1

안녕하세요!JSON 데이터를 페이지 매김 헤더가있는 테이블에 표시

내 JSON 데이터를 테이블에 표시하려면 어떻게해야합니까? 이 방법 임에 의해 점점 메신저 JSON 데이터 .. 지금 임 그냥 그 후 나는 그것을 쪽수를 매기다하려고합니다 .. 테이블에 내 데이터를 표시하는 방법을 알아 내려고 노력에 대한

{"total":1,"per_page":6,"current_page":1,"last_page":1,"from":1,"to":1, 
"data":{"id":999, 
    "firstName":"user999", 
    "lastName":"lastname999", 
    "middleName":"middlename999", 
    "company":"999 Company", 
    "email":"[email protected]", 
    "phone":"09063330756", 
    "addressStreet":"999 Street", 
    "addressCity":"999City", 
    "addressProvince":"999Province", 
    "addressPostalCode":2147483647, 
    "status":null, 
    "notes":"Supplier999"}] 
} 

을한다 AJAX 호출을 사용합니다.

public function getSuppliers() 
{ 
    $input = Input::get('searchKey'); 
    return Supplier::where('firstName', 'like', '%'.$input.'%')->paginate(6)->toJson(); 
} 
:

console.log(response.data) = undefined 

여기

console.log(response) = the JSON data above. 

내 laravel 코드 :에 내가 시도

function search(){ 


var keyWord = $("#searchSupplier").val(); 
$.ajax({ 
    url: 'api/searchSupplier', 
    type: 'get', 
    data: {searchKey: keyWord}, 
    success: function(response) { 

     $('table#supplierTable tbody').html("<tr><td>"+response.data+"</td></tr>"); 
    } 
}); 
} 

: 여기

내 아약스 코드

미리 감사드립니다.

+1

응답이 텍스트가 아닌 객체로 사용 가능해야합니다. add the dataType = 'json' – Snowburnt

+0

주석 @Snowburnt에 감사드립니다. 개체로 사용할 수있게하려면 어떻게해야합니까? 미안해 어떻게해야할지 모르겠다. :/ – melvnberd

+1

죄송합니다. 아약스 설정에 dataType = 'json'을 추가하면 success 콜백 매개 변수는 javascript 객체가되고 다차원 키 배열로 사용할 수 있습니다 – Snowburnt

답변

4

, 당신은 같은 것을 할 필요가 : 서버가 제대로 JSON를 제공

success: function(response){ 
    var html = '<table><tbody>'; 
    response.data.forEach(function(row){ 
    html += '<tr><td>' + row.id + '</td><td>' + row.firstName + ...; 
    }); 
    html += '</tbody></table>'; 
    //Set some elements innerHTML to html, or create the table some other way 
} 

경우, jQuery를 자동으로 자바 스크립트로 구문 분석 위의 방식으로 액세스 할 수있는 객체입니다.

+0

답장을 보내 주신 고맙습니다.하지만 "response.data"에 정의되지 않은 오류가 발생했습니다. 내가 console.log (응답)를 시도했을 때 전체 json 데이터를 얻었습니다. Im은 점 표기법을 통해 액세스 할 수있었습니다. 늦은 응답에 대해 유감스럽게도, 내 인터넷에 문제가있었습니다. – melvnberd

+0

이미 작동했습니다. Im은 dataType을 입력해야합니다. json 다음에 이미 점 표기법을 사용할 수 있으며, 코드와 작업도 사용했습니다. 고맙습니다. 좋은 하루 되십시오. – melvnberd

+0

도움이 될 수있어서 다행입니다. 서버가 올바른 MIME 유형 인'application/json'을 가진 JSON을 보내면 jQuery는이를 감지하고 객체 (또는 다른 경우에는 배열)로 응답을 구문 분석하도록 기본값을 가져야합니다. 'dataType'을 지정해야했기 때문에 응답 할 때 서버가 잘못된 MIME을 설정했다고 생각합니다. –

2

오픈 소스이며 사용하기 쉬운 datables 플러그인을 사용하십시오. 당신이 수동으로 수행하기 위하여려고하는 경우

http://datatables.net/

+0

링크를 주셔서 감사합니다 : 내 코드에서 이것을 구현하는 방법에 대한 연구. :) – melvnberd

관련 문제