两个bootstrap插件bootstrap-select和bootstrap-paginator

基于bootstrap的选择器 http://silviomoreto.github.io/bootstrap-select/

            <label for="androids" class="control-label" style="text-align: center">Android: </label>
            <select name="androids" id="androids" class="selectpicker" multiple title='All'>
                <c:forEach var="android" items="${androids}">
                    <option value="${android}">${android}</option>
                </c:forEach>
            </select>

使用 class="selectpicker" 设置选择器。

基于bootstrap的分页插件，支持bootstrap2和bootstrap3 https://github.com/lyonlai/bootstrap-paginator

使用示例如下：

        var options = {
            totalPages:  ${totalPages},
            currentPage: ${currentPage},
            numberOfPages: 5,
            bootstrapMajorVersion: 3,
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "First";
                    case "prev":
                        return "Previous";
                    case "next":
                        return "Next";
                    case "last":
                        return "Last";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (e, originalEvent, type, page) {
                var url = 'devices-filter-' + page + '.html';
                if ($("#devices").find("option:selected").text() == 'All' &&
                        $("#androids").find("option:selected").text() == 'All' &&
                        $("#boards").find("option:selected").text() == 'All')
                    url = 'devices-page-' + page + '.html';
                var data = $("#device_filter").serialize();
                go(url, data);
            }
        };
        $('#pagination').bootstrapPaginator(options);

在页面中使用bootstrap的分页组件：bootstrap3使用ul，bootstrap2使用div

<div class="text-center">
　　<ul class="pagination" id="pagination"></ul>
</div>