Jump to content

Twig foreach array shortcut for tables


Jessica

Recommended Posts

I like the fact that Twig has the shortcuts "Twig has shortcuts for common patterns, like having a default text displayed when you iterate over an empty array:"

{% for user in users %}
    * {{ user.name }}
{% else %}
    No user have been found.
{% endfor %}
How can you use this if you're generating a table?

For example, I have this:

<table class="table table-bordered table-striped table-hover">
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>

            {% for service in services_table %}
            <tr>
                <td>{{ service.name }}</td>
                <td>{{ service.description }}</td>
                   <td>
                        <a class="btn btn-mini btn-primary btn-block" href="{{ path('admin_edit_service', {'id':service.id}) }}"><i class="icon-pencil icon-white" title="Edit"></i> Edit</a>

                        <a class="btn btn-mini btn-danger btn-block" href="{{ path('admin_delete_service', {'id':service.id}) }}"><i class="icon-trash icon-white" title="Delete"></i> Delete</a>
                    </td>
                </tr>
{% endfor %}
            </table>
If I wanted to use the shortcut {% else %} block to display a message, I'd have already started the table header. So what I've been doing instead is wrapping the above code in an
{% if services_table|length %} ... {% else %}
which is less elegant.

 

How do you handle this? Display the table including headers if there are rows, otherwise display an else message?

Edited by Jessica
Link to comment
Share on other sites

I typically do something like this for empty tables:

<table class="table table-bordered table-striped table-hover">
	<tr>
		<th>Name</th>
		<th>Description</th>
		<th>Actions</th>
	</tr>

	{% for service in services_table %}
	<tr>
		<td>{{ service.name }}</td>
		<td>{{ service.description }}</td>
		<td>
			<a class="btn btn-mini btn-primary btn-block" href="{{ path('admin_edit_service', {'id':service.id}) }}"><i class="icon-pencil icon-white" title="Edit"></i> Edit</a>

			<a class="btn btn-mini btn-danger btn-block" href="{{ path('admin_delete_service', {'id':service.id}) }}"><i class="icon-trash icon-white" title="Delete"></i> Delete</a>
		</td>
	</tr>
	{% else %}
	<tr>
		<td colspan="3">No Records</td>
	</tr>
	{% endfor %}
</table>
If you want to omit the table entirely though then you're stuck just doing an if/else statement around the whole thing.
Link to comment
Share on other sites

Thanks Kicken - I personally think it looks nicer without the table at all, but I guess that's really a personal preference. My boss thinks it looks better with the table headers (This is my personal project, but we had the same issue at work)

Link to comment
Share on other sites

I prefer to include the table and headers even when there are no records. It makes the layout consistent. I look at the scenario where a user might be doing multiple searches. One search might return multiple pages of records, another only one page and yet another with no records. when the user does a search with no records they are going to be presented with a screen that looks and feels the same. Plus, just throwing a "no records found" in the middle of the page can look odd - if not done right.

 

But, yes, it is a personal preference.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.