bootstrap table +ajax获取数据+格式化数据

html代码

　　记得引包

<table ></table>

<a href="javascript:void(0);" >查询</a>

js代码

$search.click(function(event, firstLoad) {
   这里是一个搜索按钮，点击搜索按钮时初始化表格
    if (!firstLoad) {//根据参数判断，如果点击的是按钮会初始化按钮查询结果是第一页，如果是点击页面，查询相对应的内容
        $registerUserTable.bootstrapTable('selectPage', 1);
    }
});

//第一次页面加载查询
$search.trigger('click', {firstLoad: true});//trigger()点击按钮   后面可选参数

// 初始注册用户明细表格
var $registerUserTable = $('#registerUserTable');
$userTable.bootstrapTable({
    url: $setting.getUri() + $setting.config.channel.recharge.list,//请求数据地址，这里写在config配置里
    dataType: "json",//数据类型
    ajaxOptions: {
        xhrFields: {        //跨域
            withCredentials: true
        },
        crossDomain: true
    },
    sidePagination: 'server',//分页方式：client客户端分页，server服务端分页（*）
    pagination: true,//是否显示分页（*）
    idField: 'id',//主键
    dataField: 'list',
    columns: [{
        field: 'id', align: 'center', title: 'id', visible: false
    }, {
        align: 'center',
        title: '序号',
        formatter: function indexFormatter(value, row, index) {//在表格前加上序号
            return index + 1;
        }
    }, {
        field: 'date',
        align: 'center',
        title: '日期' ,
        formatter: function indexFormatter(value, row, index) {//格式化获取的数据，这里判断下获取的是不是总计的这条数据，如果不是正常显示，如果是显示总计数据
            return row.date == '总计' ? '<span >' + value + '</span>' : value;
        }
    }, {
        field: 'newRechargeCount',
        align: 'center',
        title: '新增充值用户数',
        formatter: function indexFormatter(value, row, index) {
            if (row.date != '总计'){
                return row.date == '总计' ? '<span >' +  row.newRechargeCount  + '</span>' :  row.newRechargeCount ;
            }else{
                return row.date == '总计' ? '<span >' + row.newRechargeCount1 + '</span>' :  row.newRechargeCount1 ;
            }
        }
    }。。。。 {
        align: 'center',
        title: '3日转化率',
        formatter: function (value, row) {
            if(row.date != '总计') {
                if (row.regCount == null || row.regCount == 0) {
                    return 0;
                } else {
                    return (row.threeDayRecharge / row.regCount * 100).toFixed(2) + "%";//toFixed（）指定保留小数点后几位数
                }
            }else{
                return row.date == '总计' ? '<span >' + row.threeDayRecharge1 + '</span>' : row.threeDayRecharge1;
            }
        }
    }],
    pageSize: 10,//首页显示多少行数据
    pageList: [10, 20, 50],
    queryParams: function (params) {//发送请求的参数
       　//layer.load();//layui前端框架里的，当数据没有加载完，会出现等待图标，加载完消失
        return {
            //key: $('#templateKey').val(),
            pageIndex: params.offset / params.limit + 1,//页码
            pageSize: params.limit, //页面大小
            startDate: start_time,
            endDate: end_time,
            agents : agent,
            qbsources : qbsource
        };
    },
    responseHandler: $util.fn.table.response,
    onLoadSuccess: $util.fn.table.onLoadSuccess,
    onLoadError: $util.fn.table.onLoadError,
    onClickRow: function (row, $element) {//给表格添加斑马效果
        $element.siblings().css('background-color', 'white');
        $element.css("background-color", "rgb(243, 247, 249)");
    }
});