使用twig基于循环构建多个表体元素

Question

我正在传入一个数据数组以使用 twig 构建一个表。我需要做的是在此表中构建多个tbody 元素，以便在每个X loop.index 上创建一个新的tbody。这背后的原因是我们有现有的javascript分页逻辑，只要我传入一个包含多个tbody元素的表，我就可以将.active类添加到tbody并显示它。

我陷入了关于如何在停止构建新的tbody 元素的同时迭代数据数组的 for 循环逻辑中。

下面的代码将是最终结果的样子：

<table class="tableList">
    <thead>
        <tr>
            <th>Name</th>
            <th>Pet Count</th>
        </tr>
    </thead>
    <tbody class="page current">
        <tr>
            <td>Visit to Wilder Elementary next Monday</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Upcoming pet show</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Waiting on collars</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Pets that Kiwi Lorem</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Waiting on new shampoo</td>
            <td>2</td>
        </tr>
    </tbody>
    <tbody class="page">
        <tr>
            <td>Pets going to photo shoot Friday</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Loem ipsum</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Pets for visit to White House</td>
            <td>0</td>
        </tr>
        <tr>
            <td>test</td>
            <td>10</td>
        </tr>
        <tr>
            <td>tet</td>
            <td>3</td>
        </tr>
    </tbody>
    <tbody class="page">
        <tr>
            <td>borm irepre</td>
            <td>11</td>
        </tr>
    </tbody>
</table>

我的树枝模板已经做到了这一点

{% if reminders|length > 1 %}
    {% set total = reminders|length %}
    {% set perPageCount = 3 %}
    {% set totalPages = (total / perPageCount)|round(0,'ceil') %}
<table class="tableList">
    <thead>
    <tr>
        <th>Type</th>
        <th>Pet Name</th>
        <th>Item To Give</th>
        <th>Time</th>
        <th>Assigned To</th>
    </tr>
    </thead>
    <tbody class="page current">
    {% for reminder in reminders %}
        <tr>
            <td>
                <i class="fas {{ reminder.returnTypeIcon }}"
                   aria-label="icon"></i>
            </td>
            <td>{{ reminder.returnPetName }}</td>
            <td>{{ reminder.ItemToGive }}</td>
            <td>{{ reminder.returnStandardTime }}</td>
            <td>{{ reminder.returnAssignedToFullName }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<p class="text-center">No reminders for today</p>
{% endif %}

上面的树枝逻辑可以很好地构建表格，但我不知道如何将其分解为多个 tbody 元素。

这是我在将所有内容移动到 twig 之前使用多个 tbody 元素绘制此表的 JavaScript，如果这有助于您概念化最终结果：

var remindersObj = data,
            remindersLength = remindersObj.length,
            perPage = 5,
            actionDiv = document.getElementById('todayReminderAction');

        if (remindersLength >= 1) {
            //build table
            var table = document.createElement('table'),
                block = [],
                th = document.createElement('thead'),
                thTr = document.createElement('tr'),
                nameThTrTd = document.createElement('th'),
                itemToGiveThTrTd = document.createElement('th'),
                timeThTrTd = document.createElement('th'),
                assignedToThTrTd = document.createElement('th'),
                petNameThTrTd = document.createElement('th');

            table.classList.add('tableList');
            nameThTrTd.innerText = 'Type';
            petNameThTrTd.innerText = 'Pet Name';
            itemToGiveThTrTd.innerText = 'Item To Give';
            timeThTrTd.innerText = 'Time';
            assignedToThTrTd.innerText = 'Assigned To';

            thTr.append(nameThTrTd);
            thTr.append(petNameThTrTd);
            thTr.append(itemToGiveThTrTd);
            thTr.append(timeThTrTd);
            thTr.append(assignedToThTrTd);
            th.append(thTr);
            table.append(th);

            remindersObj.forEach(function(reminder,i){
                var index = Math.floor(i / perPage);

                if (i % perPage === 0) {
                    if (block[index - 1]) {
                        table.append(block[index - 1]);
                    }
                    block.push(document.createElement('tbody'));
                    block[index].classList.add('page');
                }
                var row = document.createElement('tr'),
                    columnOne = document.createElement('td'),
                    columnThree = document.createElement('td'),
                    columnFour = document.createElement('td'),
                    columnFive = document.createElement('td'),
                    columnTwo = document.createElement('td');

                columnOne.innerHTML = '<i class="fas '+reminder.returnTypeIcon+'"></i>';
                columnTwo.innerText = reminder.petName;
                columnThree.innerText = reminder.itemToGive;
                columnFour.innerText = reminder.time;
                columnFive.innerText = reminder.assignedTo;
                row.append(columnOne);
                row.append(columnTwo);
                row.append(columnThree);
                row.append(columnFour);
                row.append(columnFive);

                if (reminder.isCompleted) {
                    row.classList.add('isCompleted');
                }
                if (reminder.isPastDue) {
                    row.classList.add('isPastDue');
                }
                block[index].append(row);
            });
            table.append(block[block.length - 1]);
            block[0].classList.add('current');

            actionDiv.append(table);
            buildTablePagination(remindersObj,actionDiv,table,block);
        } else {
            var noReminderP = document.createElement('p');
            noReminderP.classList.add('text-center');
            noReminderP.innerText = 'No Reminders for today.';
            actionDiv.append(noReminderP);
        }

Answer 1

你可以使用batch来解决这个问题

<table>
{% for table in items|batch(10) %}
    <tbody>
        {% for item in table %}
        <tr>
            <td>{{ item }}</td>
        </tr>
        {% endfor %}
    </tbody>
{% endfor %}
</table>

demo