bootstrap-table 分頁增刪改查之一（分頁）

本文轉載於:猿2048網站bootstrap-table 分頁增刪改查之一（分頁）

記錄一下 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('');
   }