bootstrap-table使用方法

1、引入css、js

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/plugins/bootstrap-table/bootstrap-table.min.css" />
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/plugins/bootstrap-datepicker/bootstrap-datepicker3.css" />
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootbox.min.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/plugins/bootstrap-datepicker/bootstrap-datepicker.zh-CN.min.js"></script>

2、html部分

<div class="container">
			<form class="form-horizontal" role="form">
				<fieldset>
					<legend><span class="glyphicon glyphicon-search"></span>  查询</legend>
					<div class="form-group">
						<label class="control-label col-sm-1" for="name">名称</label>
						<div class="col-sm-2">
							<input type="text" class="form-control" id="name">
						</div>
						<label class="control-label col-sm-1" for="state">状态</label>
						<div class="col-sm-2">
							<input type="text" class="form-control" id="state">
						</div>
						<label class="control-label col-sm-1" for="time">日期</label>
						<div class="col-sm-2">
							<input type="text" class="form-control  date-picker" id="time">
						</div>
						<div class="col-sm-2">
							<button type="button" id="btn_query" class="btn btn-primary">查询</button>
						</div>
					</div>
				</fieldset>
			</form>
			<div>
				<div id="toolbar" class="btn-group">
					<button id="btn_add" type="button" class="btn btn-default">
                		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		            </button>
					<button id="btn_edit" type="button" class="btn btn-default">
		                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		            </button>
					<button id="btn_delete" type="button" class="btn btn-default">
		                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		            </button>
				</div>
				<hr />
				<table id="tb_table"></table>
			</div>
			
		</div>

3、js部分

<script>
			$(function() {
				$("#tb_table").bootstrapTable({
					method: 'get', //请求方式
					url: '/order/orderList', //请求数据的URL
					toolbar: '#toolbar', //工具按钮用哪个容器
					height: tableHeight(), //高度调整
					striped: true, //是否显示行间隔色
					cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
					sidePagination: 'server', //分页方式：client客户端分页，server服务端分页
					pageNumber: 1, //初始化加载第一页，默认第一页
					pagination: true, //是否分页
					pageSize: 10, //单页记录数
					pageList: [5, 10, 20, 30], //分页数据的行数
					sortable: true, //是否启用排序
					queryParamsType: 'limit', //发送符合 RESTFul 格式的参数
					queryParams: queryParams, //传递参数
					showRefresh: true, //刷新按钮
					showColumns: true, //是否显示所有的列
					clickToSelect: true, //是否启用点击选中行
					toolbarAlign: 'left', //工具按钮对齐方式 
					buttonsAlign: 'right', //刷新按钮,显示所有的列按钮,是否启用点击选中行按钮对齐方式 
					showToggle: true, //是否显示详细视图和列表视图的切换按钮
					paginationVAlign: 'bottom', //显示分页条 在垂直方向的位置。'top'，'bottom' 或 'both'。
					paginationHAlign: 'right', //指定 分页条 在水平方向的位置。'left' 或 'right'。
					singleSelect: true, //禁止多选。
					detailView: true, //显示详细页面模式。就是加减号，如果不需要删除detailView、detailFormatter
					detailFormatter: function(index, row) { //格式化详细页面模式的视图。
						return '<a href="#">更多详情</a>';
					},
					columns: [{
						checkbox: true,
						width: 100,
						align: 'center',
					}, {
						field: 'name',
						title: '名称',
						width: 100,
						align: 'center',
						valign: 'middle',
					}, {
						field: 'state',
						title: '状态',
						width: 100,
						align: 'center',
						valign: 'middle',
						formatter: function(value, row, index) {
							var val = "";
							if(value == 0) {
								val = "禁用"
							} else {
								val = "正常"
							}
							return val;
						}
					}, {
						field: 'des',
						title: '描述',
						width: 100,
						align: 'center',
						valign: 'middle',
					}, {
						field: '',
						title: '操作',
						width: 100,
						align: 'center',
						valign: 'middle',
						events: btnEvents, //在表格最后一列添加按钮，这是事件
						formatter: btnFormatter //添加按钮的方法
					}]
				});
				//点击查询按钮刷新表格事件
				$("#btn_query").click(function() {
					$("#tb_table").bootstrapTable('refresh', {
						query: { //查询条件
							name: $('#name').val(),
							state: $('#state').val(),
							des: $('#des').val()
						},
						url: '/order/orderList'
					});
				});

				$('.date-picker').datepicker({
					minView: "day", //  选择时间时，最小可以选择到那层；默认是‘hour’也可用0表示
					language: 'zh-CN', // 语言
					autoclose: true, //  true:选择时间后窗口自动关闭
					format: 'yyyy-mm-dd', // 文本框时间格式
					todayHighlight: true //当天日期高亮显示
				});
			});
			//浏览器窗口大小改变时
			$(window).resize(function() {
				//重置表高度
				$('#tb_table').bootstrapTable('resetView', {
					height: tableHeight()
				})
			})
			//表格的高度
			function tableHeight() {
				return $(window).height() - 200; //200为查询部分的高度
			}

			//请求服务数据时所传参数
			function queryParams(params) {
				return {
					limit: params.limit,
					page: params.pageNumber,
					name: $('#name').val(),
					state: $('#state').val(),
					des: $('#des').val()
				}
			}
			//添加按钮的方法
			function btnFormatter(value, row, index) {
				return [
					'<button type="button" id="delBtn" class="btn btn-primary delBtn">删除</button>'
				].join("")
			}
			//点击按钮进行的事件，注意window.btnEvents不能放在$(function(){})里面，否则会出错
			window.btnEvents = {
				"click #delBtn": function(e, value, row, indes) {
					//bootbox弹框插件的使用方法
					bootbox.confirm({
						size: "small",
						message: "您确定删除" + row.name + "的数据吗？",
						buttons: {
							confirm: {
								label: '是',
								className: 'btn-success'
							},
							cancel: {
								label: '否',
								className: 'btn-danger'
							}
						},
						callback: function(result) {
							if(result) {
								$.ajax({
									type: "get",
									async: false,
									url: '/order/updateOrderList',
									dataType: "jsonp", //数据类型为jsonp  
									data: {
										name: row.name, //删除数据传的参数
										flag: '1'
									},
									success: function(result) { // result为返回的数据 
										var res = eval(result);
										if(res.msg == "success")
											bootbox.alert({
												size: "small",
												message: "删除成功"
											});
										$('#tb_table').bootstrapTable('refresh'); //删除成功刷新表格

									}
								});
							}
						}
					});
				}
			}
		</script>