常用表格插件：Bootstrap-table 用法梳理

这是我第2篇。

所需js文件夹

1.引用

css:
   
js:
  
  
       //中文
     //导出excel，需要时再引用

2.主要代码块

html

  

  搜 索

  新 增

  
  
-------------------------------------------------------------------------------------------------------------
js
function buildTable(){
          //配置列选项
            var columns = [
                {
                    field: 'id',    //此处要与接口字段保持一致
                    align: 'center',   //居中
                    title: '编号'    //表格th名
                },
                {
                    field: 'realName',
                    align: 'center',
                    title: '姓名'
                },
                {
                    field: 'phoneNumber',
                    align: 'center',
                    title: '电话'
                },
                {
                    field: 'typeStr',
                    align: 'center',
                    title: '类型'
                },
                {
                    field: 'opt',
                    align: 'center',
                    title: '操作',   
                    formatter: function (value, row, index) {   //一般用来操作表格的行，编辑、详情、修改、删除等
                        return [
                            '编辑|',
                            '删除'
                        ].join('');
                    }
                }];
                    
            $('#manage_table').bootstrapTable('destroy').bootstrapTable({    //每次建立表格前将上一次的表格销毁，要用到 destroy
                method:"get",    //数据请求方法
                url:"/web/list",   //接口地址
                contentType: "application/x-www-form-urlencoded",
                columns: columns,  //列配置项
                sidePagination: 'server',  //分页方式：client客户端分页，server服务端分页（*）
                pagination: true,       //是否显示分页
                pageSize: 10,          //每页展示多少行
                pageList: [10, 25, 50, 100],   //前端选择展示多少行
                pageNumber: 1,      //初始化加载第一页，默认第一页 
                queryParamsType: '',
                queryParams: paginationParam,   //查询条件
                responseHandler: dataHandler,   // 后台返回的数据处理
                locale: 'zh-CN',      //
            });

            function paginationParam(params) {
                return {
                    phoneNumber:$("#phone").val(),    //传入电话号码查询表格，有几个查询项就要添加几个字段
                    pageSize:params.pageSize,          //这两个默认页码显示多少页
                    pageNum:params.pageNumber
                };
            };

            function dataHandler(data) {
                if(data!=null && data!="" && data.code == 0) {
                    //data即为后台返回的数据
                    //这里可以给页面传入一些值显示......
                    return {
                        "total": data.response.total,    
                        "rows": data.response.list   // 后台返回的数据
                    }
                }else{
                    layer.msg("查询失败,原因："+data.msg,{icon: 5,shade: 0.6});   //配合layer弹出框来展示提示信息
                    return {
                        "total": 0,
                        "rows": []
                    }
                }
            }
        };

详细api查询：
http://blog.csdn.net/rickiyeat/article/details/56483577

3.总结：
bootstrap-table主要用于后台管理系统中数据的增删改查，工作中会经常用到，不仅很好的兼容pc端各个屏幕尺寸的展示，同时引用了bootstrap-table-mobile.min.js后还兼容移动端，整体页面显示效果很不错。自带的搜索以及工具栏我没有用，一般自定义查询设置项会更清晰美观一点。js文件中包含的bootstrap-table-export.min.js可以将页面表格下载为excel文件保存。