2016-11-23 3 views
0

표시되지, 공급되지 : 나는이 코드를 가지고 있는데이었다 아약스 요청의 데이터로 채우려Footable 오류 : 오류 : 열이 나는 .jsp로 파일에서이 테이블이 테이블

<table class="footable table table-striped table-hover" id="clientTable" data-page-size="10" data-filter=#filter> 
    <tbody id="idbody"> 
     <tfoot> 
      <tr> 
       <td colspan='6'> 
        <ul class='pagination pull-right'></ul> 
       </td> 
      </tr> 
     </tfoot> 
    </tbody> 
</table> 

동적으로 테이블을 채우기 : "FooTable :. 초기화 오류로 슬로우되지 않은 오류 :이 공급되지 않은 열"내가 그것을 실행할 때

$.ajax({ 
    type: 'POST', 
    url: 'GetClientSearchResultServlet', 
    success: function (data) { 
    var jsonString = JSON.parse(data); 

    $.each(jsonString, function(k, v) { 
     var $option= "<tr id='tr"+v.id+"'></tr>"; 
     $('#idbody').append($option); 
     $option= "<td class='client-avatar'><i class='fa fa-user'>Ola</i></td>"; 
     $('#tr'+v.id).append($option); 
     $option="<td><a data-toggle='tab' href='#contact-"+v.id+"' onclick=userDetail("+v.id+") class='client-link' id="+v.id+">"+v.name+"</a></td>"; 
     $('#tr'+v.id).append($option); 
     $option="<td>"+v.local+"</td>"; 
     $('#tr'+v.id).append($option); 
     $option="<td class='contact-type'><i class='fa fa-envelope'> </i></td>"; 
     $('#tr'+v.id).append($option); 
     $option="<td>"+v.email+"</td>"; 
     $('#tr'+v.id).append($option); 
     $option="<td class='client-status'><span class='label pull-right'>"+v.entityType+"</span></td>"; 
     $('#tr'+v.id).append($option); 
    }); 
    } 
}); 

, 그것은 오류를 제공합니다. 그러나 페이지에서 요소를 검사하면 데이터베이스의 데이터와 함께 코드에 표가 나타나지만 페이지에는 표시되지 않습니다. 어떤 도움?

답변

0

테이블 머리글 <th>이 정의되어 있지 않아서라고 생각합니다.

FooTables '문서 당

(https://fooplugins.github.io/FooTable/docs/getting-started.html)이 테이블은 다음과 같이 포맷해야합니다 :

<table> 
    <thead> 
     ... 
     <tr> 
      <th data-breakpoints="xs">ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th data-breakpoints="xs">Job Title</th> 
      <th data-breakpoints="xs sm">Started</th> 
      <th data-breakpoints="xs sm md">DOB</th> 
     </tr> 
    </thead> 
    ... 
</table>