BootstrapTable分页（二）

最新推荐文章于 2022-11-06 14:08:15 发布

csdnluolei

最新推荐文章于 2022-11-06 14:08:15 发布

阅读量7.3k

点赞数 2

分类专栏：【BootstrapTable】文章标签： bootstrapTable 分页

本文链接：https://blog.youkuaiyun.com/csdnluolei/article/details/83510577

版权

【BootstrapTable】专栏收录该内容

15 篇文章

订阅专栏

看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识，我们来看看bootstrapTable是怎么分页的

先看页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap-table-demo</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
		<!-- layer -->
		<link rel="stylesheet" href="js/plugins/layer/skin/layer.css" />
		<style type="text/css">
			.form-inline .form-group input[type=text], .form-inline .form-group select{
				width:120px;
				
			}
		</style>
	</head>
	<body style="width: 90%;margin: 0 auto;">
	
	<h2>bootstrap-table</h2>

	<form id="form1" action="" method="get" class="form-inline">
		<div class="form-group">
			<label class="control-label ">ID：</label>
			<input type="text" id="id" class="form-control" name="id" />
		</div>
		<div class="form-group">
			<label class="control-label ">Name：</label>
			<input type="text" id="name" class="form-control" name="name" />
		</div>
		<div class="form-group">
			<label class="control-label ">Price：</label>
			<!--<input type="text" id="price" class="form-control" name="price" />-->
			<select class="form-control" id="price" name="price">
				<option value="0">请选择</option>
				<option value="1">$1</option>
				<option value="2">$2</option>
				<option value="3">$3</option>
				<option value="4">$4</option>
			</select>
		</div>
		<input type="submit" class="btn btn-primary" value="搜索"/>
	</form>
	<br/>
	<div id="toolbar" class="btn-group">
		<button class="btn btn-success" id="add">新增</button>
		<button class="btn btn-warning" id="edit">编辑</button>
		<button class="btn btn-info" id="look">查看</button>
		<button class="btn btn-danger" id="remove">删除</button>
		
	</div>	
	
	<!--bootstrap-table表格-->
	<table id="table" 
		data-toolbar="#toolbar"
		data-toggle="table"     
		data-search="false"     
		data-side-pagination="client" 
		data-pagination="true" 
		data-click-to-select="true" 
		data-single-select="true"
		data-page-size= "3"
		>
		<thead style="background:#efefef;">
			<tr>
				<th data-checkbox="true"></th>
				<th data-field="id">ID</th>
				<th data-field="name">Name</th>
				<th data-field="price">Price</th>
			</tr>
		</thead>
	</table>

	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<!-- bootstrap-table -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
	<!-- 引入中文语言包 -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
	<!-- layer -->
	<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
	<script type="text/javascript">

		var $table = $("#table");
		
		$(function(){
			//$table.bootstrapTable('load', [{"id": 1,"name": "Item 0","price": "$0"}]);
			load();
		});
		//加载数据
		function load(){
			var params = [{"id": 1,"name": "Item 1","price": "$1"}, {"id": 2,"name": "Item 2","price": "$1"}, 
			{"id": 3,"name": "Item 3","price": "$2"}, {"id": 4,"name": "Item 4","price": "$3"}, 
			{"id": 5,"name": "Item 5","price": "$3"},{"id": 6,"name": "Item 6","price": "$2"}, 
			{"id": 7,"name": "Item 7","price": "$1"},{"id": 8,"name": "Item 8","price": "$4"},
			{"id": 9,"name": "Item 9","price": "$3"},{"id": 10,"name": "Item 10","price": "$4"},
			{"id": 11,"name": "Item 11","price": "$2"},{"id": 12,"name": "Item 12","price": "$3"}];
			console.log(params)
			$table.bootstrapTable('load', params);
		}
		/**
		 * 获得选中的
		 */
		function getIdSelections() {
			return $.map($table.bootstrapTable('getSelections'), function(row) {
				return row.id;
			});
		}
		//刷新
		$("#btnRefresh").on('click', function(){
			$table.bootstrapTable('refresh');
			//$("#btnRefresh").hide();
		});
		//添加
		$("#add").on('click', function(){
			//$("#btnRefresh").prop('disabled', true);
			//$("#btnRefresh").hide();
			layer.open({
			type: 2,
			title: '添加商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'add.html'
			});
		});	
		//查看
		$("#look").on('click', function(){
			var ids = getIdSelections();
			//alert(ids);
			layer.open({
			type: 2,
			title: '查看商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'edit.html?id=' + ids+'&type=look'
			});
		});
		//编辑
		$("#edit").on('click', function(){
			var ids = getIdSelections();
			//alert(ids);
			layer.open({
			type: 2,
			title: '编辑商品',
			shadeClose: false,
			shade: 0.8,
			area: ['50%', '60%'],
			content: 'edit.html?id=' + ids
			});
		});
		//删除
		$("#remove").on('click', function(){
			var ids = getIdSelections();
			layer.confirm('您是否要删除当前 ' + ids.length + '条数据？', {
			btn: ['是', '否']
			}, function() {
				del(ids);
			});
		});
		/**
		 * 删除
		 * @param {Object} ids
		 */
		function del(ids){
			layer.msg('删除成功');
		}
		
		
	</script>
	
	</body>
</html>

edit.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>编辑客户</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
		<style type="text/css">
			.form-group{
				width:90%;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
	
	<div>
		<form id="form1" action="" method="get" class="">
		<div class="form-group">
			<label class="control-label ">ID：</label>
			<input type="text" id="id" class="form-control" name="id" />
		</div>
		<div class="form-group">
			<label class="control-label ">Name：</label>
			<input type="text" id="name" class="form-control" name="name" />
		</div>
		<div class="form-group">
			<label class="control-label ">Price：</label>
			<!--<input type="text" id="price" class="form-control" name="price" />-->
			<select class="form-control" id="price" name="price">
				<option value="0">请选择</option>
				<option value="1">$1</option>
				<option value="2">$2</option>
				<option value="3">$3</option>
				<option value="4">$4</option>
			</select>
		</div>
		<div class="form-group">
			<input type="submit" id="submit" class="btn btn-primary" style="width: 25%;" value="修改"/>
			<input type="button" id="close" class="btn btn-danger" style="width: 25%;" value="关闭"/>
		</div>
		
	</form>
	</div>	
	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
	<!-- leyer -->
	<script type="text/javascript" src="js/plugins/layer/layer.min.js" ></script>
	
	<script type="text/javascript">
	/**
	 * 从url获取参数
	 * @param {Object} $
	 */
	(function ($) {
        $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
        }
     })(jQuery);
	//alert($.getUrlParam('id'));
	
	$("#close").on('click', function(){
		var index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(index);
	});
	//
	var typelook = $.getUrlParam("type");
	//初始化数据
	initData();
	if(typelook){
		$("#submit").hide();
		$("input").attr('disabled',true);
		$("select").attr('disabled',true);
		$('#close').attr('disabled', false);
	}
	function initData(){
		var id = $.getUrlParam('id');
		var name = $.getUrlParam('name');
		var price = $.getUrlParam('price');
		$('#id').val(id);
		$('#name').val(id);
		$('#price').val(id);
	}
	
	$(function(){
		
	});
	
	</script>
	</body>
</html>

bootstrapTable可以自定义ajax方法，通过ajax请求获得数据返回展示在bootstrapTable表格中

bootstrapTable自定义ajax方法 https://blog.youkuaiyun.com/csdnluolei/article/details/84191733