BootStrap 表格分页(服务器客户端)

服务器分页表格 

 function InitMainTable1 () {
	            //记录页面bootstrap-table全局变量$table,方便应用
	            var queryUrl = "/XServer/user.do?_method=doSearch";
	            $table = $('#table').bootstrapTable({
	                url: queryUrl,                      //请求后台的URL(*)
	                method: 'POST',                      //请求方式(*)
	                striped: true,                      //是否显示行间隔色
	                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
	                pagination: true,                   //是否显示分页(*)
	                sortable: true,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
	                pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
	                pageSize: 8,                     //每页的记录行数(*)
	                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
	                search: false,                      //是否显示表格搜索
	                strictSearch: true,
	                showColumns: false,                  //是否显示所有的列(选择显示的列)
	                showRefresh: true,                  //是否显示刷新按钮
	                minimumCountColumns: 2,             //最少允许的列数
	                clickToSelect: true,                //是否启用点击选中行
	                //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
	                uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
	                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
	                cardView: false,                    //是否显示详细视图
	                detailView: false,                  //是否显示父子表
	                //得到查询的参数
	                queryParams : function (params) {
	                    //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
	                    var temp = {   
	                        rows: params.limit,                         //页面大小
	                        page: (params.offset / params.limit) + 1,   //页码
	                        sort: params.sort,      //排序列名  
	                        sortOrder: params.order //排位命令(desc,asc) 
	                    };
	                    return temp;
	                },
	                columns: [{
	                    checkbox: true,  
	                    visible: true                  //是否显示复选框  
	                }, {
	                    field: 'id',
	                    title: 'ID',
	                    sortable: true
	                },{
	                    field: 'name',
	                    title: '姓名',
	                    sortable: true
	                }, {
	                    field: 'departmentStr',
	                    title: '部门',
	                    sortable: true
	                }, {
	                    field: 'office',
	                    title: '职位',
	                    sortable: true,
	                },],
	                onLoadSuccess: function () {
	                },
	                onLoadError: function () {
	                    showTips("数据加载失败!");
	                },
	                onDblClickRow: function (row, $element) {
	                    var id = row.ID;
	                    EditViewById(id, 'view');
	                },
	            });
	        };
function queryParams(params) 
			{
				var paras = {};
	        	var queryPara = JSON.stringify(paras);
	    		params._json = queryPara;
	        	
		        return params;
		    }

表格重新加载

$("#tb2").bootstrapTable('destroy');

客户端表格分页:

 function getTb2(jsonUser){
	        	$("#tb2").bootstrapTable('destroy');
	        	$('#tb2').bootstrapTable({
	        		 striped: true,                      //是否显示行间隔色
		                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
		                pagination: true,                   //是否显示分页(*)
		                sortable: true,                     //是否启用排序
		                sortOrder: "asc",                   //排序方式
		                sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
		                pageNumber: 1,                      //初始化加载第一页,默认第一页,并记录
		                pageSize: 8,                     //每页的记录行数(*)
		                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
		                search: false,                      //是否显示表格搜索
		                strictSearch: true,
		                showColumns: false,                  //是否显示所有的列(选择显示的列)
		                showRefresh: true,                  //是否显示刷新按钮
		                minimumCountColumns: 2,             //最少允许的列数
		                clickToSelect: true,                //是否启用点击选中行
		                //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
		                uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
		                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
		                cardView: false,                    //是否显示详细视图
		                detailView: false,                  //是否显示父子表
	    			columns: 
	    			[
	    				{field:"checked",checkbox:true},
	    				{field:"departmentStr",title:"部门",align:"center",valign:"middle",sortable:"true"},
	    				{field:"officeStr",title:"职位",align:"center",valign:"middle",sortable:"true"},
	    				{field:"name",title:"姓名",align:"center",valign:"middle",sortable:"true"},
	    			],
	    			data:jsonUser,
	    		});			
	        }

jsonUser  是在客户端的j'son   我的表格就是为了显示json的内容    columns中的第一个参数和json的参数一样才能显示

猜你喜欢

转载自blog.csdn.net/qq_39705793/article/details/82772709