pagerSmall.twig

{% if paginator.numPages > 1 %}
    <div class="input-group" style="width: 1px;">
        {% if paginator.prevUrl %}
            <span class="input-group-btn">
                <a href="{{ paginator.prevUrl }}" class="btn btn-default" type="button">&laquo; Prev</a>
            </span>
        {% endif %}

        <select class="form-control paginator-select-page" style="width: auto; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;">
            {% for page in paginator.pages %}
                {% if page.url %}
                    <option value="{{ page.url }}"{{ page.isCurrent ? 'selected' : '' }}>
                        Page {{ page.num }}
                    </option>
                {% else %}
                    <option disabled>{{ page.num }}</option>
                {% endif %}
            {% endfor %}
        </select>

        {% if paginator.nextUrl %}
            <span class="input-group-btn">
                <a href="{{ paginator.nextUrl }}" class="btn btn-default" type="button">Next &raquo;</a>
            </span>
        {% endif %}
    </div>
{% endif %}

{# Depends on this little bit of javascript being included somewhere:
    $(function() {
        $('.paginator-select-page').on('change', function() {
            document.location = $(this).val();
        });
        // Workaround to prevent iOS from zooming the page when clicking the select list:
        $('.paginator-select-page')
            .on('focus', function() {
                if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) {
                    $(this).css('font-size', '16px');
                }
            })
            .on('blur', function() {
                if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) {
                    $(this).css('font-size', '');
                }
            })
        ;
    });
#}