1.创建介绍
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E6%96%B9%E6%B3%95
//请求服务数据时所传参数
function queryParams(params){
return{
//每页多少条数据
pageSize: params.limit,
//请求第几页
pageIndex: params.pageNumber,
}
}
//创建表格
$('#table').bootstrapTable({
method: 'get',
url: "../controller/main_pic_list.php",//后台接口地址
dataType: "json",
pagination: true, //分页
search: true, //显示搜索框，是否显示表格搜索，此搜索是客户端搜索，不会进服务端
strictSearch: true,//Enable the strict search
striped: true, //是否显示行间隔色
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 5,//每页的记录行数
pageList:[5,10,15,20,25,30],//分页步进值
showRefresh:true,//刷新按钮
showColumns:true,//是否显示所有的列
//sortable: true,//是否启用排序
//sortOrder: "asc",//排序方式
//uniqueId: "ID",//每一行的唯一标识，一般为主键列
showToggle:true,//是否显示详细视图和列表视图的切换按钮
//cardView: false,//是否显示详细视图
//detailView: false,//是否显示父子表
//toolbar: '#toolbar',//指定工具栏
//clickToSelect: true,//是否启用点击选中行
//toolbarAlign:'right',//工具栏对齐方式
//buttonsAlign:'right',//按钮对齐方式
queryParamsType:'limit',//查询参数组织方式
queryParams:queryParams,//请求服务器时所传的参数
cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
locale:'zh-CN',//中文支持
sidePagination: "server", //服务端处理分页
responseHandler:function(res){
//在ajax获取到数据，渲染表格之前，修改数据源
$.each(res.rows,function (i,v) {
v.updatetime = getLocalTime(v.updatetime);
});
return res;
},
columns: [
{
title:'全选',
field:'select',
//复选框
checkbox:true,
width:25,
align:'center',
valign:'middle'
},
{
title: 'id',
field: 'id',
align: 'center'
},
{
title: '标题',
field: 'title',
align: 'center',
valign: 'middle'
},
{
title: '说明信息',
field: 'altinfo',
align: 'center',
},
{
title: '所属模块',
field: 'modname',
align: 'center'
},
{
title: '图片URL',
field: 'pictureurl',
align: 'center',
//更改此项显示的内容，无此参数会显示默认值
formatter:function(value,row,index){
return ''+value+' ';
}
},
{
title: '状态',
field: 'status',
align: 'center'
},
{
title: '权重',
field: 'weight',
align: 'center'
},
{
title: '最近更新时间',
field: 'updatetime',
align: 'center'
},
{
title: '创建者',
field: 'createuser',
align: 'center'
},
{
title: '最新修改者',
field: 'lastuser',
align: 'center'
},
{
title: '最近修改者ip',
field: 'lastip',
align: 'center'
},
{
title: '操作',
field: 'operation',
align: 'center',
//更改此项显示的内容，无此参数会显示默认值
formatter:function(value,row,index){
var e = '编辑 ';
var d = '删除 ';
if(value === 'e') {
return e;
}
if(value === 'ed') {
return e+d;
}
}
}
]
});
2.增删改查bootstrapTable
3。案例