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