关于bootstrapTable的用法(3)-基本用法

bootstrapTable的基本用法

$('#table').bootstrapTable({
    method: 'post',
    contentType: "application/x-www-form-urlencoded",//当请求方法为post的时候,必须要有!!!!
    url:"     ",//请求路径
    striped: true, //是否显示行间隔色
    cache: false,
    pageNumber: 1, //初始化加载第一页
    pagination: true,//是否分页
    sidePagination: 'server',//server:服务器端分页|client:前端分页
    pageSize: 10,//单页记录数
    pageList: [10,20,30],//可选择单页记录数
    showRefresh: true,//刷新按钮 
    queryParams:function(params) {//需要查询的参数
        return {
            page: (params.offset/params.limit) + 1,   
            rows: params.limit,
            参数名1:参数值1,
            参数名2:参数值2 //可以有多个参数值
        };
    },
    columns:[
    	{
             checkbox: true,
             align: 'center',
             valign : 'middle'
         },
         {
	       	title:'姓名',//需要显示的字段
            width:200,//行宽
            field:'name',//对应的字段名
            align: 'center',
            valign : 'middle'
        },
        {
	       	title:'年龄',//需要显示的字段
            width:200,//行宽
            field:'age',//对应的字段名
            align: 'center',
            valign : 'middle'
        },
        {
            title: '操作',
            width:200,//行宽
            field: 'id',//对应的字段名
            align: 'center',
            valign : 'middle',
            formatter:function(value,row,index){//可以选择显示HTML或者相关的函数计算
                var s='';
                s+=' 需要显示的内容1 ';
                s+=' 需要显示的内容2 ';
                return s;
            }
        }
    ]
});

效果图
关于bootstrapTable的用法(3)-基本用法_第1张图片

你可能感兴趣的:(js,bootstrapTable,bootstrapTable)