简单介绍：
1、支持分页、查询
2、直接copy以下代码，就可以看到效果
3、参考网上资源，做了个简单的变动
示例如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="cdn" uri="http://www.kanq.com.cn/platform/tags/cdn"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/solr/css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/kqoa/common/fileinput/css/fileinput.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/kqoa/common/bootstrap-table/bootstrap-table.css"/>
<!-- 引入js -->
<script src="${pageContext.request.contextPath}/static/supervision-statistics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/solr/css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/kqoa/common/fileinput/js/fileinput.min.js"></script>
<script src="${pageContext.request.contextPath}/static/kqoa/common/bootstrap-table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/kqoa/common/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/static/kqoa/common/fileinput/js/locales/zh.js"></script>
</head>
<body>
<div id="reportTableDiv" >
<table id="reportTable"></table>
</div>
</body>
<script type="text/javascript">
var datas = [];
for(var i=0;i<30;i++){//手动制造30条数据
datas[i]={"name":"测试"+i+"号",
"age":"年龄："+i+"岁","sex":"男"+i}
}
$(function () {
$('#reportTable').bootstrapTable({
method: 'get',
cache: false,
height: 400,
striped: true,
pagination: true,
pageSize: 20,
pageNumber:1,
pageList: [10, 20, 50, 100, 200, 500], sidePagination:'client',
search: true,
showColumns: true,
showRefresh: false,
showExport: false,
exportTypes: ['csv','txt','xml'],
search: true,
clickToSelect: true,
columns:
[
{field:"name",title:"测试姓名",align:"center",valign:"middle",sortable:"true"},
{field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"},
{field:"sex",title:"性别",align:"center",valign:"middle",sortable:"true"},
],
data:datas,
});
});
</script>
</html>
相关推荐
Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、...
在本模板中，动态表格功能的实现结合了Bootstrap的表格组件以及筛选、分页和排序等增强功能，为用户提供更佳的数据浏览体验。 首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持...
Bootstrap表格模板是前端开发中常用的一种工具，尤其在构建数据密集型Web应用时，它能够高效地展示和管理大量信息。动态满屏的表格模板，结合了筛选、分页和排序功能，为用户提供了一种直观且易用的数据浏览体验。在...
Bootstrap Table 是一个基于Bootstrap框架的开源插件，用于创建功能丰富的、响应式的表格。这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了...
Bootstrap Table是一种基于HTML5和Bootstrap框架的开源JavaScript插件，用于创建功能丰富的表格。它提供了数据的排序、筛选、分页等功能，使网页中的数据展示更加灵活和互动。在本项目中，我们关注的是如何自定义...
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格，这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点： 1. **Bootstrap**：Bootstrap 是一个流行的开源 CSS 框架，它提供...
对于服务器端分页，可以使用 `data-side-pagination` 设置为 "server"，并根据 Bootstrap-table 的请求参数（如 `page`, `limit`, `search`, `sortName`, `sortOrder` 等）来调整服务器端的查询逻辑。 此外，还可以...
Vue Cli与BootStrap结合实现表格分页功能 该资源主要介绍了如何使用Vue Cli与BootStrap结合实现表格分页功能。下面是相关知识点的详细说明： 一、Vue Cli简介 Vue Cli是基于Vue.js的命令行工具，用于快速构建Vue....
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...
这个"bootstrap-table客户端分页实例"是展示如何在不依赖服务器端处理的情况下，利用前端数据实现表格的分页功能，这对于小型项目或者数据量不大的场景非常实用。 Bootstrap Table的核心特性包括： 1. **数据源**...
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下： 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
基于bootstrap+jquery的分页插件bs_pagination。如果我们的项目采用了bootstrap前端框架，可以考虑这款基于bootstrap+jquery的分页插件。本文将为你介绍该款分页插件的使用方法。
在本主题中，我们聚焦于"两款漂亮的bootstrap分页样式"，这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件（Pagination）是一个基本的导航元素，用于分隔大量的内容或结果，让用户能够分步骤...
针对这一需求，开发者们创建了各种插件来增强Bootstrap表格的功能，比如“Bootstrap树型表格和多标题表格”。 这个插件是对Bootstrap原生表格的扩展，旨在实现类似EXT JS中的TreeGrid的效果。TreeGrid是一种特殊的...
1. **Bootstrap分页组件**：Bootstrap内置了分页组件（`.pagination`），提供了预设的样式和交互效果。通过使用`.pagination`类，我们可以轻松创建基础的分页链接。此外，还有`.page-item`用于表示分页项，`.page-...
在本项目中，我们结合了Spring Boot、Mybatis-Plus、Thymeleaf以及Bootstrap来实现一个具有分页查询功能的Web应用。首先，让我们详细探讨每个技术在项目中的作用和实现方式。 **Spring Boot** Spring Boot是Spring...
综上所述，Bootstrap Table是一个功能强大的前端表格解决方案，尤其适用于需要展示大量数据并进行分页、排序和导出的场景。其丰富的API和扩展性使得开发者能够轻松构建功能丰富的数据展示界面。
在Web开发中，Bootstrap表格插件常用于实现数据的展示、排序、分页、筛选等操作，使得网页中的表格更加用户友好，提升用户体验。 在"测试bootstrap表格插件，表格分页插件"这个场景中，我们关注的核心是表格的分页...
基于Bootstrap样式的分页组件