Server-Seite gerendert HTML -> JS-Tabelle?

Question

Ich arbeite an einem älteren Symfony2 Projekt und mit stark Zweig.

Hier ist die Vorlage für eine einzelne Zeile:

<tr> 
    <td class="centerCell"> 
     <img src="/images/social-icons/{{ review.type }}.png" title="{{ review.type }}"/> 
    </td> 
    <td data-rating="{{ review.rating }}" class="centerCell"> 
     <div class="starContainer"> 
      {% for i in 1..5 %} 
       <span class="gfsStar{% if i <= review.rating %} on{% endif %}"></span> 
      {% endfor %} 
     </div> 
     <div class="ratingBadge">{{ review.rating }}/5</div> 
    </td> 
    <td> 
     <div {% if review.content|length > 275 %} class="block-with-text" {% endif %}>{{ review.content }}</div> 
     {% if review.content|length > 275 %} <div class="over-flow-indicator">[Read more]</div> {% endif %} 
    </td> 
    <td>{{ review.time }}</td> 
    <td class="centerCell">{{ review.author }}</td> 
    <td> 
     <a class="viewButton" href="{{ review.url }}" target="_blank">View</a> 
    </td> 
</tr> 

I ajax verwenden, um einen Controller zu nennen, die Modell-Daten packt, ruft dann die Render() Methode die HTML zu erzeugen.

Ich möchte an das vordere Ende Sortieranlagen/Paginierung hinzuzufügen, aber alle Plugins ich gefunden habe, nicht unterstützen Hinzufügen von Zeilen (über Ajax) von HTML gerendert. Beim Laden der Seite möchte ich nur 10-20 Bewertungen anzeigen und mehr vom Server anfordern, wenn der Benutzer weiter fortfährt. Bootstrap-Tabelle schien eine großartige Lösung zu sein, aber aufgrund der Komplexität der Vorlage fand ich keine gute Möglichkeit, ihre Ajax-Funktionalität zu implementieren.

Offensichtlich ist dies kein neues Problem, wie die Menschen gelöst haben dies vor?

Answer 1

Ich hasse meine eigene Frage hier zu beantworten, aber nach reiflicher Untersuchung ich auf eine anständige Lösung gekommen. Ich musste es vermeiden, die HTML-Server-Seite zu rendern und stattdessen einen einfachen Satz von Funktionen in JavaScript implementieren, die das gleiche erreichen, was Smart zuvor getan hat. Hier ist die JS entspricht den Zweig Vorlage oben:

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

Ich bin mit den bootstrap-table plugin mit einer benutzerdefinierten Ajax-Methode. Hier ist, wie das aussieht:

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

wirklich Ich hoffe, das landet jemand anderes auf dem Weg zu helfen.