bootstrap 简易表格、分页、查询
opspider 2018-10-27
简单介绍：
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>
相关推荐
前端分页相当简单，在我添加了2w条测试数据的时候打开的很流畅，没有卡顿。var d = '<button href="#" class="btn btn-default" mce_href="#&qu