Jump to content

Archived

This topic is now archived and is closed to further replies.

Jessica

Twig foreach array shortcut for tables

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?

Share this post


Link to post
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.

Share this post


Link to post
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)

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

×
×
  • 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.