bootstrap-table使用属性来进行table进行一系列操作

bootstrap-table属性入门精选版

在网上搜一些bootstrap-table的属性时发现大多都是使用js对table进行定义
导致一些童鞋想使用简单的属性table定义，找一些偏一点的属性时找不到，而网上大多都是使用js来定义，比如前两天我想使用属性来对从后台的的数据进行某一个属性对象的赋值如：data.data,找了半天才找到那个属性，还有bootstrap-table进行cookie跨域携带，这个属性也找了半天，所有我今天挑一些来说一下。

先上一小图

这几个基础都不细说了，

	<table id="tableok" 
					data-toggle="table"  <--定义导入的包，默认table就行-->
					data-method="post"  <--请求类型-->
					 data-pagination="true"  <--是否开启分页-->
					 data-page-size="8" <--默认每页显示几行-->
					 data-page-list="[4, 6, 8, 12]"  <--可选显示几行-->
					 data-url="http://localhost:8080/book/findall"  <--请求地址-->
					 > 
				<thead>
				<tr>
					<th data-field="bid">序号</th>
					<th data-field="bookname">图书名称</th>
					<th data-field="bname">图书作者</th>
					<th data-field="house">出版社</th>
					<th data-field="salary">图书价格</th>
					<th data-field="zhekousalary">折扣后价格</th>
					<th data-field="zhekou" >折扣</th>
					<th data-field="bid" data-formatter="chaozuo" >操作</th>
				</tr>
			</thead >
			<tbody style="font-size: 10px;">
			</tbody>
		</table>

当请求数据时，你可以通过修改queryParams向服务器发送其余的参数，就是带参数
data-query-params=“queryParams” 这个名字给下面方法对应上就行，
这样参数就会携带上

function queryParams(params){
			params.sname=$("[name=sname]").val()
			params.age=$("[name=age]").val()
			params.dept=$("[name=dept]").val()
			return patams
		}

这个是写分页时携带的返回携带的参数

function queryParams(params){
			 return {
		        pageSize : params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
		        pageIndex : params.offset+1//params.limit+1,  //当前页面,默认是上面设置的1(pageNumber)
    		}
		}

data-response-handler="responseHandler ”在加载服务器发送来的数据之前，处理数据的格式，可以说初始化"
这个属性我找了半天
res是你服务器传来的数据，如果你只想取某个属性的集合值加个点如res.data 如:

	function responseHandler(res){
			return res.data;
		}

这个是使用分页时，要初始化处理的数据格式，不过你返回的{}中bootstrap-table只认识处理total属性也就是总行数，而data是数据要让他知道 加个data-data-field="data"属性，当然如果不写后台分页就不用

function responseHandler(res){
			return {
				total:res.total,
				data:res.data
			};
		}

data-ajax-options=“t1” 向服务器请求ajax时的附加项，默认无附加
我使用用这个属性就是解决bootstrap-table Cookie携带跨域，当然这个也可使用
别的发送ajax的附加项，不过这个我就举个Cookie携带跨域的类型

因为这个属性接收是个{} 不是个function所有我使用一个变量

var t1=function(){
            var options={ 
            	xhrFields: {        //跨域
           			 withCredentials: true
        		},
       			 crossDomain: true
            };
            return options;
       }

最后发个table总配置

<table id="tableok" 
					data-toggle="table" 
					data-method="post" 
					data-side-pagination="server"
					data-data-field="data"
					 data-pagination="true"
					 data-query-params="queryParams" 
					 data-page-size="8"
					 data-page-list="[4, 6, 8, 12]"
					 data-ajax-options="t1"
					 data-response-handler="responseHandler"
					 data-url="http://localhost:8080/book/findall">
				<thead>
				<tr>
					<th data-field="bid">序号</th>
					<th data-field="bookname">图书名称</th>
					<th data-field="bname">图书作者</th>
					<th data-field="house">出版社</th>
					<th data-field="salary">图书价格</th>
					<th data-field="zhekousalary">折扣后价格</th>
					<th data-field="zhekou" >折扣</th>
					<th data-field="bid" data-formatter="chaozuo" >操作</th>
				</tr>
			</thead >
			<tbody style="font-size: 10px;">
			</tbody>
		</table>

当然bootstrap还有很多很多属性，我发的只是，我需要的但是找到了很长时间。
发出来避免有些童鞋想使用属性时，发现网上全是js的使用，而找不到属性的使用。