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

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

先看下效果图

1. 首先是导入js 

   　　

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

   
   		
   
   			
   收入类目查询条件
   			
   
   				
   
   					
   
   						日期：
   							
   
   							 
   							 
   							 
   
   							 
   						
   						
   
   							查询
   						
   						1
   					
   				
   			
   		
   
   		
   
   			 
                   新增
               
   			
                   删除
               
   		
   		
   	
   

   　　

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 [
   '',
   '',
   ' ',
   '',
   '', '' ].join('');
   }

转载于:https://www.cnblogs.com/chenlizhi/p/7768533.html