mardi 14 juin 2016

Server-side rendered HTML -> JS Table?

I am working on an older Symfony2 project and using Twig heavily.

Here's the template for a single row:

<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 use ajax to call a controller which grabs model data, then calls the renderView() method to generate the HTML.

I want to add sorting/pagination to the front end but all of the plugins I have found don't support adding rows (via ajax) of rendered HTML. On page load I only want to display 10-20 reviews, and request more from the server when the user pages further along. Bootstrap-table seemed like a great solution but due to the complexity of the template I didn't find a good way to implement their ajax functionality.

Clearly this isn't a new problem, how have people solved this before?

Aucun commentaire:

Enregistrer un commentaire