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