zoukankan      html  css  js  c++  java
  • 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)");
    }
    });
    
    
    
  • 相关阅读:
    [bzoj1072][SCOI2007][排列perm] (状态压缩+数位dp+排列去重)
    [bzoj2461][BeiJing2011][符环] (括号配对+记忆化搜索+高维dp)
    [bzoj4027][HEOI2015][兔子与樱花] (树形dp思想+玄学贪心)
    [bzoj1925][Sdoi2010][地精部落] (序列动态规划)
    [bzoj1004][HNOI2008][Cards] (置换群+Burnside引理+动态规划)
    [bzoj1003][ZJOI2006][物流运输] (最短路+dp)
    [spoj104][Highways] (生成树计数+矩阵树定理+高斯消元)
    [bzoj1002][FJOI2007 轮状病毒] (生成树计数+递推+高精度)
    [bzoj 1001][Beijing2006]狼抓兔子 (最小割+对偶图+最短路)
    [模拟赛FJOI Easy Round #2][T3 skill] (最小割+最大权闭合子图(文理分科模型))
  • 原文地址:https://www.cnblogs.com/ph121/p/6839424.html
Copyright © 2011-2022 走看看