Добавление данных с плагином Bootstrap-table

При загрузке страницы Symfony/Twig позаботится о предоставлении/рендеринге данных, изначально показанных в таблице, к которой применяется bootstrap-table.

Пользователи могут щелкнуть, чтобы получить больше записей, и в этот момент я делаю:

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

В этом случае данные структурированы так, как в этом примере: https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/append.html НО я возвращаю HTML для многих ячеек. Этот вид работает, но я теряю стиль, связанный с таблицей, в добавленных строках. Вещи не отцентрованы или расположены неправильно, потому что этот стиль выполняется на уровне ячейки.

Я бы предпочел использовать возможности AJAX, встроенные в bootstrap-table, однако я не хочу терять мощь, которую предоставляет Twig, поскольку я использую Symfony2 за кулисами.

Есть какие-нибудь мысли от тех, кто использовал этот (или похожий) плагин?


jquery ajax bootstrap-table twig
person Nicholas Kreidberg    schedule 11.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я заменил шаблон 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;
}

Этот подход отлично работает, и все стили + обработчики событий сохраняются.

person Nicholas Kreidberg    schedule 19.06.2016