bootstrap table总结, bootstrap表格带参请求，基本设置项，bootstrap表格返回参数处理

bootstrap table是bootstrap的引申插件，使用简单，引入，css，js等就可以使用。

首先分享一下网址，基本的入门和配置项文档都有了，可以先学习一下。

入门：bootstrap table中文网 bootstrap table中文网

http://bootstrap-table.wenzhixin.net.cn/zh-cn/

前端代码

我把它写在了一个方法里，注释都很清楚

function creatmodlelist(){
	
	var datechose = $('#modledate').val();
	//临时
	  datechose="2018-02-26";
	  
	//先销毁表格
    $('#detailtable').bootstrapTable('destroy'); 
    $('#detailtable').bootstrapTable({
    	//基本设置
    	url:"faillist.json",
        method: 'get',						//请求方法
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
    	striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        
        //分页设置
        pagination: true,                   //是否显示分页（*）
        pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [2, 10, 25, 100],        //可供选择的每页的行数（*）
        
        //外置div区域的工具栏
        toolbar: '#toolbar', //工具按钮用哪个容器
        
        //查询参数,每次调用是会带上这个参数，可自定义                         
                queryParams : function(params) {
                	var faildate = $('#modledate').val();
                	//临时
	  				faildate="2018-02-26";
                    return {
                          pageNum: params.offset+1,
                          pageSize: params.limit,
                          date:faildate
                        };
                },
        //返回数据格式处理
        responseHandler: function(res) {
                return {
                    "total": res.DATA.totalRecordCount,//总页数
                    "rows": res.DATA.itemsList   //数据
                 };
            },
        
        //工具栏
        search:true,						//是否启用搜索框
        searchOnEnterKey:true,				//按回车触发搜索方法
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        
        //列信息和列设置
        columns: [{
	        field: 'city',
	        title: '地市',
	    }, {
	        field: 'mobile',
	        title: '编号'
	    }, {
	        field: 'orgTime',
	        title: '执行日期'
	    }, {
	        field: 'stage',
	        title: '阶段'
	    }]
    });
}

注意：

    一，bootstrap table 不允许跨域访问，会报错。

        大致意思是本地的链接不能访问其他地方

        解决方式可以用jsonp，这里不多说了。

Failed to load http://.../Manager?action=findAllFail&pageNum=1&pageSize=10&date=2018-02-26&_=1519976999637: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.

            所以我在这里写了一个本地的json文件来测试。

        url:"faillist.json",

    二，bootstrap table 带参访问设置

        queryParams 配置项用来设置第一次请求参数和翻页时的参数

    三，bootstrap table 返回参数要求

        bootstrap table 返回参数要求为json串，而且必须包含 total（总数） 和 rows（数据）

        如果没有可以用responseHandler处理，如下

        

//返回数据格式处理
        responseHandler: function(res) {
                return {
                    "total": res.DATA.totalRecordCount,//总页数
                    "rows": res.DATA.itemsList   //数据
                 };
            },