bootstrap table表格插件使用详解

bootstrp-table学习，具体内容如下$table.bootstrapTable({url:'../data/data1.json',striped:true,minimumCountColumn

bootstrp-table学习，具体内容如下

$table.bootstrapTable({
 url: '../data/data1.json',
 striped: true,
 minimumCountColumns: 2,
 clickToSelect: true,
 detailView: true,
 detailFormatter: 'detailFormatter',
 pagination: true,
 paginationLoop: false,
 classes: 'table table-hover table-no-bordered',
 sidePagination: 'server',
 silentSort: false,
 queryParamsType:'',
 queryParams: queryParams : function(params) {
 var subcompany = $('#subcompany option:selected').val();
 var name = $('#name').val(); 
 return {
 pageNumber: params.offset+1,
 pageSize: params.limit,
 companyId:subcompany,
 name:name
 };
 },
 smartDisplay: false,
 idField: 'id',
 sortable: false,
 escape: true,
 idField: 'systemId',
 maintainSelected: true,
 toolbar: '#toolbar',
 columns: [
 {field: 'state', checkbox: true},
 {field: 'id', title: '编号', sortable: true, halign: 'center'},
 {field: 'username', title: '账号', sortable: true, halign: 'center'},
 {field: 'password', title: '密码', sortable: true, halign: 'center'},
 {field: 'name', title: '姓名', sortable: true, halign: 'center'},
 {field: 'sex', title: '性别', sortable: true, halign: 'center'},
 {field: 'age', title: '年龄', sortable: true, halign: 'center'},
 {field: 'phone', title: '手机', sortable: true, halign: 'center'},
 {field: 'email', title: '邮箱', sortable: true, halign: 'center'},
 {field: 'address', title: '地址', sortable: true, halign: 'center'},
 {field: 'remark', title: '备注', sortable: true, halign: 'center'},
 {field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
 ]
 }).on('all.bs.table', function (e, name, args) {
 $('[data-toggle="tooltip"]').tooltip();
 $('[data-toggle="popover"]').popover(); 
 }); 

bootstrap-table是一种表格插件，可用作后管系统的数据处理和回显，当然，bootstrap-table的使用需要前后台协调进行。

在使用bootstrap-table过程中需要注意：

　　接口返回数据格式[json]包含的两个字段： total（数据总计）与rows（数据）,即{"total":24,"rows":[...]}

　　分页包括服务器端和客户端两种情况，务器端分页的参数默认值为limit，offset,search,sort,order Else,通过queryParamsType参数可对其进行重写

　　columns字段中：file 表示返回字段的属性名；title表示th标题内容；formatter表示自定义列表显示内容，包含三个参数,value, row, index，对应 为file值，行数据，行数

function actionFormatter(value, row, index) {
 return [
 
 '<a class="like" href="detail.html" rel="external nofollow" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-pencil"></i></a>　',
 '<a class="edit ml10" href="javascript:createAction()" rel="external nofollow" data-toggle="tooltip" title="修改密码"><i class="glyphicon glyphicon-edit"></i></a>　',
 ].join('');
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。