首页 > > 网页制作 > css >

bootstrap-table 分页增删改查之一（分页）

2018-06-24 02:00:03来源：未知阅读 ()

记录一下 bootstrap-table插件的使用

先看下效果图

首先是导入js

<!--js jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
<!--js bootstrap -->
<script src="${pageContext.request.contextPath}/bootstrapJs/bootstrap.min.js"></script>
<!-- js bootstrap-table 分页插件 --> 
<script type="text/javascript"src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/bootstrapJs/table/bootstrap-table-zh-CN.js"></script>
<!-- js bootstrap-datetimepicker 时间插件 -->
<script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.min.js"></script>  
<script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- js knockout 增删改查 插件 --> 
<script src="https://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrapJs/knockout/knockout.mapping-latest.js"></script>
<!-- css -->
<link href="${pageContext.request.contextPath}/css/bootstrap-table.css"rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/bootstrapCss/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" />

在页面上增加标签，分页标签有两种方式一种是自己在页面上写，一种是在js中自定义，我选择的是第一种

<div class="panel-body" style="padding-bottom: 0px;" id="shouRu">
		<div class="panel panel-default">
			<div class="panel-heading">收入类目查询条件</div>
			<div class="panel-body">
				<form id="formSearch" class="form-horizontal">
					<div class="form-group" style="margin-top: 15px">
						<label class="control-label col-sm-1"
							for="txt_search_departmentname">日期：</label>
							<div class="col-sm-3">
							 <input placeholder="开始日期" class="form-control layer-date" id="start" name="startDate">
							 </div>
							 <div class="col-sm-3">
							 <input placeholder="结束日期" class="form-control layer-date" id="end" name="endDate">
						</div>
						<div class="col-sm-4" style="text-align: left;">
							<button type="button" style="margin-left: 50px" id="btn_query"
								class="btn" onclick="show();">查询</button>
						</div>
						<span style="display: none" id="span">1</span>
					</div>
				</form>
			</div>
		</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_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
		</div>
		<table id="tb_departments" data-bind="myBootstrapTable:$root"></table>
	</div>

写js

$(function() {
	// 1.初始化Table
	var oTable = new TableInit();
	oTable.Init();
});

//定义table显示样式 和后台交互的url
var TableInit = function() {
	var oTableInit = new Object();
	// 初始化Table
	oTableInit.Init = function() {
		$("#tb_departments").bootstrapTable('destroy');
		$('#tb_departments').bootstrapTable({
			url : '/billMaven/categoryselect', // 请求后台的URL（*）
			method : 'get', // 请求方式（*）
			toolbar : '#toolbar', // 工具按钮用哪个容器
			striped : true, // 是否显示行间隔色
			cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination : true, // 是否显示分页（*）
			sortable : false, // 是否启用排序
			sortOrder : "asc", // 排序方式
			sidePagination : "server", // 分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数（*）
			pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
			search : true, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			strictSearch : true,
			showColumns : true, // 是否显示所有的列
			showRefresh : false, // 是否显示刷新按钮
			minimumCountColumns : 1, // 最少允许的列数
			clickToSelect : true, // 是否启用点击选中行
			height : 400, // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId : "id", // 每一行的唯一标识，一般为主键列
			showToggle : true, // 是否显示详细视图和列表视图的切换按钮
			cardView : false, // 是否显示详细视图
			detailView : false, // 是否显示父子表
			queryParamsType : "",  //我使用的是向后台传输 page和size 还有另一种方式，请自行百度
			queryParams : oTableInit.queryParams,
			columns : [ {
				checkbox : true
			}, {
				field : 'id', //对应返回的名称
				title : 'id'  //自定义名称
			}, {
				field : 'billname',
				title : '收入类目名称'
			}, {
				field : 'creatime',
				title : '类目创建时间',  //因为后台返回的时间是时间戳  所以要转换成我们平常看到的日期
				formatter : function(value, row, index) {
					return fmtDate(value)
				}
			}, {
				title : '操作',
				align : 'center',
				formatter : operateFormatter   //自定义修改和删除标志  也可以不写
			}, ],
			formatNoMatches: function(){
		        return "没有相关的匹配结果";
		    },

		    formatLoadingMessage: function(){
		        return "请稍等，正在加载中。。。";
		    }
		});
	};
	function fmtDate(obj) {   //时间转换的方法
		var date = new Date(obj);
		var y = 1900 + date.getYear();
		var m = "0" + (date.getMonth() + 1);
		var d = "0" + date.getDate();
		var h = date.getHours();
		var mm = date.getMinutes();
		var s = date.getSeconds();
		return y + "-" + m.substring(m.length - 2, m.length) + "-"
				+ d.substring(d.length - 2, d.length) + "  " + h + ":" + mm
				+ ":" + s;
	}
	// 得到查询的参数  条件查询
	oTableInit.queryParams = function(params) {
		var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			size: params.pageSize, // 页面大小
			page: params.pageNumber, // 页码
			startdate : $("#start").val(),  
			enddate : $("#end").val(),
			statu : $("#span").html()
		};
		return temp;
	};
	return oTableInit;
};

var ButtonInit = function() {
	var oInit = new Object();
	var postdata = {};

	oInit.Init = function() {
		var oTable = new TableInit();
		oTable.Init();
	};

	return oInit;
};
//页面上的查询按钮点击事件
function show() {
	// 2.初始化Button的点击事件
	var oButtonInit = new ButtonInit();
	oButtonInit.Init();

}

　//操作按钮定义

function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Update" onclick="remove()">',
'<i class="glyphicon glyphicon-heart" onclick="remove()"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有