Использование ветки для создания нескольких элементов тела таблицы на основе цикла - PullRequest
Новая
       4

Использование ветки для создания нескольких элементов тела таблицы на основе цикла

0 голосов
/ 02 февраля 2020

Я передаю массив данных для построения таблицы с использованием ветки. Что мне нужно сделать, так это создать несколько tbody элементов в этой таблице, чтобы на каждом X loop.index мы создавали новый tbody. Причиной этого является то, что у нас есть javascript pagination logi c, и, пока я передаю таблицу с несколькими tbody элементами, я могу добавить класс .active к tbody и показать его ,

Я застрял в журнале for l oop logi c на том, как выполнить итерацию массива данных при остановке для создания нового элемента tbody.

Ниже код будет таким, как будет выглядеть конечный результат: 

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

Приведенная выше логика ветки c строит таблицу просто хорошо, но я не могу понять, как разбить это на несколько элементов tbody.

Вот JavaScript, который я использовал, чтобы нарисовать эту таблицу с несколькими элементами tbody, предшествующими задаче переместить все это в веточку, если это поможет осмыслить конечный результат для вас: 

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

1 Ответ

0 голосов
/ 03 февраля 2020

Вы можете использовать пакет , чтобы решить эту проблему 

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

демо

...