Using twig to build multiple table body elements based on loop

I am passing in an array of data to build a table using twig. What I need to do is build multiple tbody elements in this table, so that on every X loop.index we create a new tbody. The reasoning behind this is that we have existing javascript pagination logic, and as long as I pass in a table with multiple tbody elements i can then add an .active class to a tbody and show it.

I am getting stuck in the for loop logic on how to both iterate over the array of data while stopping to build a new tbody element.

The below code would be what the end result would look like:

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

I’ve gotten this far with my twig template

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

The above twig logic builds the table just fine, but I can’t figure out how to break this up into multiple tbody elements.

Here is the JavaScript I was using to paint this table with multiple tbody elements previous to the task of moving this all into twig, if this helps conceptualize the end result for you:

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

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *