bootstrap table +ajax獲取數據+格式化數據

 

html代碼 

　　記得引包

<table id="registerUserTable" class="table-no-bordered"></table>

<a href="javascript:void(0);" id="search" class="btn btn-default">查詢</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 style="color: red;">' + value + '</span>' : value;
        }
    }, {
        field: 'newRechargeCount',
        align: 'center',
        title: '新增充值用戶數',
        formatter: function indexFormatter(value, row, index) {
            if (row.date != '總計'){
                return row.date == '總計' ? '<span style="color: red;">' +  row.newRechargeCount  + '</span>' :  row.newRechargeCount ;
            }else{
                return row.date == '總計' ? '<span style="color: red;">' + 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 style="color: red;">' + 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)");
    }
});