ブートストラップテーブルプラグイン付きデータの追加

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; 
} 

このアプローチは素晴らしい作品とスタイリング+イベントハンドラはすべて保存されています。