BootStrap Table 分页前端设置

BootStrap Table 做分页时有前端分页处理,也有后端分页处理。以下针对js 前台代码的设置参数做一个详细的说明:

//先销毁原来渲染的数据
$("#elementId").bootstrapTable('destroy');
//重新渲染数据表格
$('#elementId').bootstrapTable({
	url:'BigData/queryTableList.do', //请求url
	method:'GET',//BootStrap 默认的请求方式
	contentType: "application/x-www-form-urlencoded",//如果使用post请求的话,此项必须设置
	data: refrenceData, //外部请求返回的数据来源比如和ajax结合使用,可选项
	dataType:'json',
	search:false,//true:激活搜索框,false:关闭搜索框
	searchOnEnterKey:false,//按回车时触发搜索功能,true:可用,false:关闭功能 
	cache:false,//不缓存数据
	pagination: true,//是否显示分页,true:显示,false:不显示
	pageNumber: 1,   //初始化加载第一页,默认第一页页码
	pageSize: 10,//每页显示的数据条数
	pageList: [5, 10, 20],//用于设置选择每页显示的记录数,支持动态显示
	paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,可以自定义
        paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,可以自定义
	showRefresh:false,//刷新按钮是否显示:true:显示,false:不显示 
	paginationLoop:true,//true 翻页功能无限循环,false:关闭此功能
	sidePagination: "server",//client:客户端分页,server:服务端分页
	queryParams: function (params){//提交给后台的参数都是要放在这里的
		var param = {//这里的params是table提供的
			limit: params.limit,//每页显示的记录条数
			offset: (params.offset / params.limit) + 1, //每页显示记录的起始值:对应oracle数据库中的rownum, 对应mysql数据库中的limit
			requestParams:function(){//查询条件可以放在这个函数里提交到后台
				//例如转成json数据格式
				var querydata = $("#formid").serialize();
				var paramsList  = querydata.split("&");
				var temp = "{[";
				paramsList.forEach(function(item,index){
					var split  = item.split("=");
					temp = temp + split[0] + ":" + split[1];
					if(index < paramsList.length -1){
						temp = temp + ",";
					}
				});
				temp = temp + "]}";
				return temp;
			}
		};
	},
	responseHandler: function(result){//请求数据成功后,渲染表格前的数据处理
            total : result.dataCount, //返回数据的总条数,前面的key必须为"total"
            refrenceData: result.rows    	  //表格行数据
	},
	columns: [
		{
			field : 'checked',
			checkbox: true,
			align: 'center',
			valign: 'middle'
		},{
			field: 'prisaid',
			title: '一级指标编号'
		},{
			field: 'prisaname',
			title: '一级指标名称' 
		},{
			field: 'phase',
			title: '对应阶段'
		},{
			field: 'threweight',
			title: '威胁权重'
		},{
			field: 'pagetimestamp',
			title: '维护时间',
		}
	]
});

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值