부트 스트랩 테이블 플러그인이있는 데이터 추가

Question

페이지로드시 Symfony/Twig는 처음에 부트 스트랩 테이블이 적용된 테이블에 표시된 데이터를 제공/렌더링합니다.

사용자 내가하는 시점에서 이상의 레코드를 얻기 위해 클릭 할 수 있습니다 : 그것은이 예에서와 같이이 경우 데이터에

$table = $("#reviewTable"); 
$table.bootstrapTable('append', data); 

가 구성되어있다 : https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/append.html하지만 세포의 많은 HTML을 반환하고 있습니다. 이러한 종류의 작동하지만 추가 된 행에 테이블 관련 스타일을 잃게됩니다. 스타일은 셀 수준에서 수행되기 때문에 사물의 중심이 맞지 않거나 정확하게 배치되지 않습니다.

부트 스트랩 테이블에 내장 된 AJAX 기능을 사용하는 편이 좋지만, 뒤에서 Symfony2를 사용하고 있기 때문에 Twig에서 제공하는 성능을 잃고 싶지는 않습니다.

이 플러그인 (또는 비슷한) 플러그인을 사용한 사람들의 의견은 무엇입니까?

Answer 1

Twig 템플릿과 서버 측 HTML 세대를 JS 솔루션으로 대체했습니다. 여기 내 최종 코드가 끝난 것입니다.

HTML :

<table class="table table-striped" id="tblReviewDetails" 
         data-toggle="table" data-pagination="true" 
         data-ajax="getReviewData" data-side-pagination="server" data-page-list="[10, 25, 50, 100, 250]"> 
        <thead> 
         <tr> 
          <th class="centerCell" data-field="type" data-sortable="true">Site</th> 
          <th class="centerCell" data-field="rating" id="headRating" data-sortable="true" data-width="100px">Rating</th> 
          <th data-field="content" data-width="50%">Review Content</th> 
          <th data-field="time" data-sortable="true">Date</th> 
          <th class="centerCell" data-field="author" data-sortable="true">Name</th> 
          <th data-field="url">Direct Link</th> 
         </tr> 
        </thead> 
       </table> 

JS는 :

function getReviewData(params, offset) { 

    $.post("/extended-review-monitor/reviews", {"limit": 10, "offset": offset}) 
     .done(function (data) { 
      console.dir(data); 

      processedData = transformData(data.data); 

      console.log("processed data"); 
      console.dir(processedData); 

      setTimeout(function() { 
       params.success({ 
        total: data.data[0].total, 
        rows: processedData 
       }); 

      }, 1000); 

     }) 
     .fail(function() { 
      console.log("ajax error"); 
     }); 

    console.log("ajax complete"); 
} 

function transformData(data) { 

    var transformedArray = []; 

    for(var i = 0; i < data.length; i++) { 
     var obj = { 
      id : data[i].id, 
      type : getTemplate('type', data[i].type), 
      author : data[i].author, 
      time : data[i].time, 
      rating : getTemplate('rating', data[i].rating), 
      content : getTemplate('content', data[i].content), 
      url : getTemplate('url', data[i].url) 
     }; 

     console.log("In loop: " + i); 
     console.dir(obj); 

     transformedArray.push(obj); 
    } 

    return transformedArray; 
} 

function getTemplate(key, value) { 

    var html = ''; 

    switch (key) { 
     case "type" : 
      html = '<img src="/images/social-icons/' + value + '.png" style="height:32px;" title="' + value + '"/>'; 
      break; 
     case "rating" : 
      html = getRatingHTML(value); 
      break; 
     case "content" : 
      html = getContentHTML(value); 
      break; 
     case "url" : 
      html = '<a class="viewButton" href="' + value + '" target="_blank">View</a>'; 
      break; 
    } 

    return html; 
} 

function getContentHTML(value) { 

    var html = '<div', 
     indicator = ''; 

    if (value.length > 275) { 
     html += ' class="block-with-text"'; 
     indicator += '<div class="over-flow-indicator">[Read more]</div>'; 
    } 

    html += '>' + value + '</div>' + indicator; 

    return html; 
} 

function getRatingHTML(value) { 
    var html = '<div class="starContainer" style="min-width: 72px">'; 

    for (var i = 1; i <= 5; i++) { 
     html += '<span class="gfsStar '; 
     if (i <= value) { 
      html += 'on'; 
     } 

     html += '"></span>'; 
    } 

    html += "</div>"; 
    html += '<div class="ratingBadge">' + value + '/5</div>'; 

    return html; 
} 

이 방법은 잘 작동하고 스타일 + 이벤트 핸들러는 모두 보존됩니다.