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>

相关推荐