Javascript 服务器端呈现的HTML->；JS表？

我正在从事一个较旧的Symfony2项目，并大量使用Twig

以下是单行的模板：

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

{1..5%中的i为%1}
{%endfor%}
{{review.rating}}/5
275%}class=“带文本的块”{%endif%}>{{review.content}
{%if review.content | length>275%}[阅读更多]{%endif%}
{{review.time}
{{review.author}}

我使用ajax调用一个控制器来获取模型数据，然后调用renderView（）方法来生成HTML

我想在前端添加排序/分页，但我发现的所有插件都不支持（通过ajax）添加呈现HTML的行。在页面加载时，我只想显示10-20条评论，并在用户继续页面时从服务器请求更多评论。Bootstrap表似乎是一个很好的解决方案，但是由于模板的复杂性，我没有找到一个好的方法来实现它们的ajax功能

---

显然这不是一个新问题，人们以前是如何解决的？

我不想在这里回答我自己的问题，但经过大量调查，我确实找到了一个不错的解决方案。我不得不避免渲染HTML服务器端，而是用JavaScript实现了一组简单的函数，这些函数完成了Smart之前所做的事情。下面是与上面的Twig模板等效的JS：

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

---

我真的希望这最终能帮助其他人。

听起来您基本上希望能够使用AJAX并返回一个字符串数组以附加到表中，对吗？[ "...", "... ]这似乎是可行的，但我肯定没有看到任何现有的JS表库支持这一点，我希望有人能提供一个好的解决方案…是的，唯一的诀窍是能够保留表插件的功能。Datatable、bootstrap表等…它们都是基于列的，不能很好地处理HTML行。

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