bootstrap-table 分页增删改查之一(分页)

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

新老客户大回馈,云服务器低至5折

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

先看下效果图

  1. 首先是导入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" />
    

      

  2. 在页面上增加标签,  分页标签有两种方式一种是自己在页面上写,一种是在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>
    

      

  3.  写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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css选择器(基础)

下一篇:jsp实现账户登录、注册!