bootstrap-table表格插件的使用案例

近期刚刚结束一个项目，总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件，下面是我做的一个案例（展示主要代码部分）：

//请求服务数据时所传参数
        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 '<a href="'+ value +'" target=_blank>'+value+'</a> ';
                    }
                },
                {
                    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 = '<a href="main_pic_edit.html?">编辑</a> ';
                        var d = '<a href="../controller/main_pic_delete.php?" href="#">删除</a> ';
                        if(value === 'e') {
                            return e;
                        }
                        if(value === 'ed') {
                            return e+d;
                        }
                    }
                }
            ]
        });

　　注意：1. bootstrap-table表格插件自带分页功能，传递的参数要和后台协商定义好；2. 其他参数配置参考代码中的注释。