Bootstrap table使用方法详细介绍
bootstrap-table是一个非常好用的表格插件，提供了很多工具及分页、搜索等功能。
首先我们需要下面几个文件，
<spanstyle="font-size:18px;"><!--bootstraptable-->
<scripttype="text/javascript"src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js"></script>
<!--bootstrap-->
<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/res/bootstrap/css/bootstrap.css"/>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/res/bootstrap/js/bootstrap.js"></script>
<linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.css"/>
<scripttype="text/javascript"src="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.js"></script>
<!--bootstraptable中文包-->
<scripttype="text/javascript"src="${pageContext.request.contextPath}/res/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script></span>
中文包好像可以防止某些bug
如果你单独引入这些文件而导致样式出错，请下载完整的bootstrap-table
下面是bootstrap-table的加载
<spanstyle="font-size:18px;"><scripttype="text/javascript">
$(function(){
//1.初始化Table
varoTable=newTableInit();
oTable.Init();
});
varTableInit=function(){
varoTableInit=newObject();
//初始化Table
oTableInit.Init=function(){
$('#tb_departments').bootstrapTable({
url:'${pageContext.request.contextPath}/AlarmInfo/list',//请求后台的URL（*）
method:'get',//请求方式（*）
toolbar:'#toolbar',//工具按钮用哪个容器
striped:false,//是否显示行间隔色
cache:false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination:true,//是否显示分页（*）
sortable:false,//是否启用排序
sortOrder:"asc",//排序方式
queryParams:oTableInit.queryParams,//传递参数（*）
sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pageSize:10,//每页的记录行数（*）
pageList:[10,25,50,100],//可供选择的每页的行数（*）
search:false,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch:true,
showColumns:true,//是否显示所有的列
showRefresh:false,//是否显示刷新按钮
minimumCountColumns:2,//最少允许的列数
clickToSelect:true,//是否启用点击选中行
height:500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId:"id",//每一行的唯一标识，一般为主键列
showToggle:true,//是否显示详细视图和列表视图的切换按钮
cardView:true,//是否显示详细视图
detailView:false,//是否显示父子表
columns:[{
checkbox:true
},{
field:'Id',
title:'编号'
},{
field:'Name',
title:'姓名'
},{
field:'Type',
title:'类型'
},{
field:'Time',
title:'时间'
}
]
});
};
</script>
<head>
<body>
<divclass="panel-body"style="padding-bottom:0px;">
<tableid="tb_departments"></table>
</div>
</body>
</head>
</span><spanstyle="font-size:18px;">
</span>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。